Guava Sunset Gradient
Coral and peach mesh blobs deepening into their own sunset red base.
Open in the gradient generator →
Color Stops
#FF6F61
#FFB88C
#DE6262
#FFA07A
#FF4500
Background · #FF6F61
Guava Sunset CSS Code
HEX Copy
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;
RGBA Copy
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);
HSLA Copy
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);
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.