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.
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.