Sunbeam CSS Gradient
A yellow, white, rays 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.
background-image: conic-gradient(from 0deg, oklch(0.99 0.029 102.674) 0deg, oklch(0.945 0.144 102.842) 15deg, oklch(0.99 0.029 102.674) 30deg, oklch(0.945 0.144 102.842) 45deg, oklch(0.99 0.029 102.674) 60deg, oklch(0.945 0.144 102.842) 75deg, oklch(0.99 0.029 102.674) 90deg, oklch(0.945 0.144 102.842) 105deg, oklch(0.99 0.029 102.674) 120deg, oklch(0.945 0.144 102.842) 135deg, oklch(0.99 0.029 102.674) 150deg, oklch(0.945 0.144 102.842) 165deg, oklch(0.99 0.029 102.674) 180deg, oklch(0.945 0.144 102.842) 195deg, oklch(0.99 0.029 102.674) 210deg, oklch(0.945 0.144 102.842) 225deg, oklch(0.99 0.029 102.674) 240deg, oklch(0.945 0.144 102.842) 255deg, oklch(0.99 0.029 102.674) 270deg, oklch(0.945 0.144 102.842) 285deg, oklch(0.99 0.029 102.674) 300deg, oklch(0.945 0.144 102.842) 315deg, oklch(0.99 0.029 102.674) 330deg, oklch(0.945 0.144 102.842) 345deg, oklch(0.99 0.029 102.674) 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.