CSS Gradient Generator

Purple gradients for backgrounds, hero sections and cards: pale lavender, deep violet and plum, electric purples and soft mauves, plus purple paired with blue, pink, teal and orange, as linear, radial, conic and mesh gradients. Pick a tone, hover a gradient to see it in use, then edit it or get it as an image.

FAQ

How do I make a purple gradient in CSS?

Mix a lighter and a darker purple, for example linear-gradient(135deg, #D1B8F4 0%, #DAC8FD 50%, #CDBAFA 100%). Shifting one end toward blue and the other toward magenta makes it livelier.

What colors go well with purple in a gradient?

Blue and pink are the classic pairings, teal gives a cool contrast and orange a bold, warm one. The last group on this page shows these pairings.