Modern UILinear · 2 stops
Purple CSS gradients
Browse purple CSS gradients from lilac and violet to magenta and deep aubergine, with linear and radial examples. These 24 selected examples come from the existing gradient library.
Use this gradient.
Purple blends work as atmospheric panels and vivid accents. Pair a pale lilac blend with dark text, or a deep violet blend with light text, and keep body copy on a solid surface.
Text over gradients.
Violet and magenta stops can share the same lightness while differing in hue, which does not help legibility. Check text contrast against the actual stops rather than judging by hue.
CSS for Amethyst Riot
background: linear-gradient(90deg, #4E2DCD 0%, #9229DA 100%);
background: linear-gradient(90deg in oklab, #4E2DCD 0%, #9229DA 100%);The first declaration supplies an sRGB fallback; the second interpolates in OKLab. Create a gradient with your own colours and stops.