Skip to content

Citrus Slices CSS Gradient

A yellow, green, fresh 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.

CSS
background-image: conic-gradient(from 90deg, oklch(0.856 0.168 90.869) 0deg, oklch(0.744 0.156 62.877) 90deg, oklch(0.64 0.195 25.144) 180deg, oklch(0.688 0.152 137.302) 270deg, oklch(0.856 0.168 90.869) 360deg);

The colors

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

Tags

Related gradients

More gradient tools

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