How do I make a purple gradient in CSS?

Use linear-gradient() with two or more purple hex values, for example background: linear-gradient(135deg, #7C3AED 0%, #C4B5FD 100%);. Add a deeper anchor stop at 0% for more drama.

Is a purple-to-pink gradient still a purple gradient?

Yes, when the purple stop carries more weight (covers more of the track) and sits at the visual focus. The Orchid Glow preset uses this approach for high-energy CTAs.

Which purple gradient works for a dark mode hero?

Violet Studio, Galaxy Spotlight, and Royal Ink are tuned for dark mode — they hold white headlines at AAA contrast and read as premium without flattening on small screens.

Can I use a purple gradient for a logo background?

Yes, if the logo is a solid mark with enough contrast against both stops. Test the logo against the lightest and darkest pixel of the gradient before shipping.

How do I avoid the purple gradient looking dated?

Skip the symmetric 50/50 violet-to-pink that defined late-2010s SaaS branding. Instead, weight the gradient asymmetrically (one stop at 0%, the next at 70%+) so one hue clearly dominates.

Gradient library · Purple

Purple gradient CSS — lavender, violet, plum.

Ten purple gradients built for creative, beauty, fintech, and AI products. Each preset includes the CSS, the hex stops, and the surface it fits — pick one, copy the line, ship.

Violet Studio · #2E1065 → #7C3AED → #C4B5FD

The hex codes.

Five anchor colors that show up across every preset in this library. Copy any one to use it directly.

Anchor dark
Royal Violet
#2E1065
Mid
Studio Violet
#7C3AED
Accent
Orchid
#A855F7
Tint
Lavender
#C4B5FD
Surface
Linen Lavender
#F3E8FF

The preset library.

Copy the CSS in one tap, or open any preset in the generator to adjust angle, stops, and type.

Violet Studio
Hero background · linear · 135°
- #2E1065· 0%
- #7C3AED· 60%
- #C4B5FD· 100%
```
background: linear-gradient(135deg, #2E1065 0%, #7C3AED 60%, #C4B5FD 100%);
```
Open in gradient generator →
Lavender Linen
Surface tile · linear · 180°
- #F3E8FF· 0%
- #C4B5FD· 100%
```
background: linear-gradient(180deg, #F3E8FF 0%, #C4B5FD 100%);
```
Open in gradient generator →
Plum Velvet
Editorial panel · linear · 120°
- #3B0764· 0%
- #9333EA· 100%
```
background: linear-gradient(120deg, #3B0764 0%, #9333EA 100%);
```
Open in gradient generator →
Indigo Dusk
Hero overlay · linear · 200°
- #1E1B4B· 0%
- #6366F1· 100%
```
background: linear-gradient(200deg, #1E1B4B 0%, #6366F1 100%);
```
Open in gradient generator →
Orchid Glow
CTA button · linear · 90°
- #A855F7· 0%
- #EC4899· 100%
```
background: linear-gradient(90deg, #A855F7 0%, #EC4899 100%);
```
Open in gradient generator →
Aubergine
Dashboard surface · linear · 160°
- #4C1D95· 0%
- #BE185D· 100%
```
background: linear-gradient(160deg, #4C1D95 0%, #BE185D 100%);
```
Open in gradient generator →
Mauve Fog
Light hero · linear · 90°
- #EDE4F2· 0%
- #B19CD9· 100%
```
background: linear-gradient(90deg, #EDE4F2 0%, #B19CD9 100%);
```
Open in gradient generator →
Galaxy Spotlight
Spotlight card · radial
- #7C3AED· 0%
- #2E1065· 100%
```
background: radial-gradient(circle at center, #7C3AED 0%, #2E1065 100%);
```
Open in gradient generator →
Royal Ink
Brand surface · linear · 135°
- #581C87· 0%
- #A855F7· 100%
```
background: linear-gradient(135deg, #581C87 0%, #A855F7 100%);
```
Open in gradient generator →
Spectrum Wheel
Decorative ring · conic · 0°
- #7C3AED· 0%
- #EC4899· 33%
- #6366F1· 66%
- #7C3AED· 100%
```
background: conic-gradient(from 0deg at center, #7C3AED 0%, #EC4899 33%, #6366F1 66%, #7C3AED 100%);
```
Open in gradient generator →

Purples

How to use this gradient family.

Why purple gradients carry creative weight.

Purple is the rarest hue in natural light, which is why it has historically marked royalty, ritual, and the avant-garde. A purple gradient inherits that register by default — even a quiet lavender-to-linen wash reads as considered rather than corporate. Modern creative, beauty, and AI products lean on purple gradients to signal craft and intelligence without the cold authority of blue. Pair a deep violet anchor with a lighter mauve or orchid stop and you have a surface that says new without saying loud.

Violet, indigo, and plum — which to pick.

Violet (around 270° on the hue wheel) is the punchy mid-purple — it works for hero sections and headlines. Indigo (around 240°) pulls toward blue and reads more technical; it suits dashboards and developer products. Plum and aubergine (around 290°–310°) pull toward magenta and feel more editorial. A gradient that traverses from indigo to violet to orchid covers the full creative spectrum without leaving the family.

Reading text on a purple gradient.

Deep purples (#2E1065, #3B0764, #4C1D95) carry white text at WCAG AAA. Mid violets (#7C3AED, #9333EA) carry white at AA but should be paired with a slightly bolder font weight. Lavender tints (#C4B5FD, #F3E8FF) require dark ink (#1d1d1f) for readable body copy. If the gradient spans both ends, place headlines on the dark third and leave the light third for imagery or empty space.

How to use the purples gradient library.

Step 1
Pick a preset
Choose the purple preset that fits your surface — hero, card, button, or accent.
Step 2
Copy the CSS
Tap copy on the preset card to grab the background declaration.
Step 3
Refine in the generator
Open the preset in the gradient generator to nudge the angle or add a third stop.

Frequently asked questions.

How do I make a purple gradient in CSS?: Use linear-gradient() with two or more purple hex values, for example background: linear-gradient(135deg, #7C3AED 0%, #C4B5FD 100%);. Add a deeper anchor stop at 0% for more drama.
Is a purple-to-pink gradient still a purple gradient?: Yes, when the purple stop carries more weight (covers more of the track) and sits at the visual focus. The Orchid Glow preset uses this approach for high-energy CTAs.
Which purple gradient works for a dark mode hero?: Violet Studio, Galaxy Spotlight, and Royal Ink are tuned for dark mode — they hold white headlines at AAA contrast and read as premium without flattening on small screens.
Can I use a purple gradient for a logo background?: Yes, if the logo is a solid mark with enough contrast against both stops. Test the logo against the lightest and darkest pixel of the gradient before shipping.
How do I avoid the purple gradient looking dated?: Skip the symmetric 50/50 violet-to-pink that defined late-2010s SaaS branding. Instead, weight the gradient asymmetrically (one stop at 0%, the next at 70%+) so one hue clearly dominates.