Skip to content

Coral Sun CSS Gradient

A coral, yellow, summer linear 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: linear-gradient(135deg, oklch(0.791 0.121 17.626) 0%, oklch(0.904 0.067 338.05) 50%, oklch(0.992 0.002 67.802) 100%);

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.