Guava Sunset Gradient
Coral and peach mesh blobs deepening into their own sunset red base.
Customize this gradient → Opens it in the generator: change the type or direction, adjust the colors, then copy the CSS or download.
Color Stops
#FF6F61
#FFB88C
#DE6262
#FFA07A
#FF4500
Background
#FF6F61
#FF6F61
Guava Sunset CSS Code
background: #FF6F61; background: radial-gradient(at 56% 18%, #FF6F61, transparent 70%), radial-gradient(at 82% 46%, #FFB88C, transparent 70%), radial-gradient(at 64% 79%, #DE6262, transparent 70%), radial-gradient(at 27% 72%, #FFA07A, transparent 70%), radial-gradient(at 22% 35%, #FF4500, transparent 70%), #FF6F61;
background: rgba(255, 111, 97, 1.0); background: radial-gradient(at 56% 18%, rgba(255, 111, 97, 1.0), transparent 70%), radial-gradient(at 82% 46%, rgba(255, 184, 140, 1.0), transparent 70%), radial-gradient(at 64% 79%, rgba(222, 98, 98, 1.0), transparent 70%), radial-gradient(at 27% 72%, rgba(255, 160, 122, 1.0), transparent 70%), radial-gradient(at 22% 35%, rgba(255, 69, 0, 1.0), transparent 70%), rgba(255, 111, 97, 1.0);
background: hsla(5, 100%, 69%, 1.0); background: radial-gradient(at 56% 18%, hsla(5, 100%, 69%, 1.0), transparent 70%), radial-gradient(at 82% 46%, hsla(23, 100%, 77%, 1.0), transparent 70%), radial-gradient(at 64% 79%, hsla(0, 65%, 63%, 1.0), transparent 70%), radial-gradient(at 27% 72%, hsla(17, 100%, 74%, 1.0), transparent 70%), radial-gradient(at 22% 35%, hsla(16, 100%, 50%, 1.0), transparent 70%), hsla(5, 100%, 69%, 1.0);
background: #FF6F61; background: radial-gradient(at 56% 18%, #FF6F61, transparent 70%), radial-gradient(at 82% 46%, #FFB88C, transparent 70%), radial-gradient(at 64% 79%, #DE6262, transparent 70%), radial-gradient(at 27% 72%, #FFA07A, transparent 70%), radial-gradient(at 22% 35%, #FF4500, transparent 70%), #FF6F61; background: radial-gradient(at 56% 18% in oklch, oklch(71.51% 0.1785 27.97), transparent 70%), radial-gradient(at 82% 46% in oklch, oklch(83.9% 0.101 52.68), transparent 70%), radial-gradient(at 64% 79% in oklch, oklch(64.98% 0.1559 22.39), transparent 70%), radial-gradient(at 27% 72% in oklch, oklch(79.38% 0.1248 42.42), transparent 70%), radial-gradient(at 22% 35% in oklch, oklch(66.02% 0.2294 35.4), transparent 70%), oklch(71.51% 0.1785 27.97);
The same gradient with its colors in OKLCH. Older browsers show the standard version. How OKLCH gradients work →
Try it as
Similar Gradients
More Gradient Presets
FAQ
What is the Guava Sunset gradient?
Coral and peach mesh blobs deepening into their own sunset red base.
What's the CSS code for the Guava Sunset gradient?
Use background: radial-gradient(at 56% 18%, #FF6F61, transparent 70%), radial-gradient(at 82% 46%, #FFB88C, transparent 70%), radial-gradient(at 64% 79%, #DE6262, transparent 70%), radial-gradient(at 27% 72%, #FFA07A, transparent 70%), radial-gradient(at 22% 35%, #FF4500, transparent 70%), #FF6F61;. RGBA and HSLA versions are also available on this page.