Skip to content

Coral Burst CSS Gradient

A coral, pink, warm radial 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-color: oklch(0.957 0.022 7.173);
background-image: radial-gradient(circle at 35% 30%, oklch(0.759 0.144 26.078) 0%, oklch(0.679 0.209 24.658) 40%, oklch(0.539 0.194 26.725) 85%, oklch(0.957 0.022 7.173) 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.