Candy Stripes CSS Gradient

A bold, stripes, playful conic gradient you can drop into any project. Copy the CSS below and use it as a background for hero sections, cards, buttons, or full pages.

The CSS

background-image: conic-gradient(from 0deg, oklch(0.606 0.23 9.628) 0deg 30deg, oklch(1 0 0) 30deg 60deg, oklch(0.606 0.23 9.628) 60deg 90deg, oklch(1 0 0) 90deg 120deg, oklch(0.606 0.23 9.628) 120deg 150deg, oklch(1 0 0) 150deg 180deg, oklch(0.606 0.23 9.628) 180deg 210deg, oklch(1 0 0) 210deg 240deg, oklch(0.606 0.23 9.628) 240deg 270deg, oklch(1 0 0) 270deg 300deg, oklch(0.606 0.23 9.628) 300deg 330deg, oklch(1 0 0) 330deg 360deg);

The colors

The colors this gradient blends between. Open any of them for a full breakdown — shades, harmonies, and contrast.

Tags:boldstripesplayfulConic

Related gradients

Indigo Rush
Candy Pop
Spectrum Wheel
Sunset Ring
Pastel Pinwheel
Monochrome Spin
Citrus Slices
Deep Sea Cone

More gradient tools

Browse the full gallery of CSS gradients, build animated backgrounds with the Shader Maker, or generate soft multi-color backgrounds with the Mesh Gradient Generator.