Purple CSS Gradient Generator

A rich purple CSS gradient that runs from bright violet into deep indigo, with a modern, premium feel. It suits creative, tech and product sites. Copy it in one click or tweak the stops below. 100% in your browser - copy the CSS or a Tailwind v4 export.

Type

Angle (135°)

Interpolation color space

Color stops

50%

100%

CSS

background: linear-gradient(in oklch 135deg, #a855f7 0%, #7c3aed 50%, #4c1d95 100%);

Tailwind v4 (@theme)

Use it as bg-(image:--gradient-brand)

@theme {
  --gradient-brand: linear-gradient(in oklch 135deg, #a855f7 0%, #7c3aed 50%, #4c1d95 100%);
}

About the purple gradient

Purple gradients read as creative and premium, which is why so many modern startups use them. This preset blends a vivid violet into a deep indigo purple so the result has depth rather than a single flat tone. Shift one stop toward pink for a more playful look, or keep it cool and moody. Interpolate in OKLCH for the cleanest violet-to-purple blend, then copy the CSS or Tailwind v4 export.

The CSS for this gradient:

background: linear-gradient(in oklch 135deg, #a855f7 0%, #7c3aed 50%, #4c1d95 100%);

Frequently Asked Questions

Blend purple stops in a linear-gradient, for example background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #4c1d95 100%);. Start from the preset above and copy the CSS, or drag a stop toward pink for a purple-pink blend.

Purple blends beautifully with pink and magenta for a warmer feel, or with blue and indigo for a cooler, deeper look. Staying near purple on the color wheel keeps the transition smooth.