Mediterranean Sunset
linearA warm coral-to-gold sunset gradient.
Where Mediterranean Sunset Fits
Mediterranean Sunset is a warm two-stop linear gradient from coral to gold. It reads immediately as summer and travel, which makes it a strong fit for tourism sites, food brands, event pages, and playful SaaS products that want personality. The 45 degree angle sends the warmest colors diagonally, giving headlines crossing the gradient a constant hue change from left to right.
Dark text on the gold end of the ramp holds up well, and bold display type in a deep maroon or near-black can sit directly on the bottom half. As you get closer to the coral end, contrast drops, so keep smaller text off that region or set it in white with a shadow. This is one of the lighter gradients in the catalog, so it pairs best with a white or cream page background rather than another dark surface.
Two-stop gradients band less than three-stop ones, and this pair stays smooth on large panels because both colors sit at a similar lightness. If the coral reads too hot behind white UI, wrap the gradient in a rounded card instead of bleeding it across the whole viewport. The gold end also works as a flat accent color when you strip the gradient away for small elements like dividers and tags. Rotate the angle in the preview and watch where the bright spot lands, because that is where text loses contrast first.
position 0%
position 100%
background: linear-gradient(45deg, #FF6B6B 0%, #FFE66D 100%);:root {
--gradient-sunset-mediterranean: linear-gradient(45deg, #FF6B6B 0%, #FFE66D 100%);
}
.gradient-sunset-mediterranean {
background-image: var(--gradient-sunset-mediterranean);
}<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
<defs>
<linearGradient id="g" x1="14.64%" y1="85.36%" x2="85.36%" y2="14.64%">
<stop offset="0.000" stop-color="#FF6B6B" />
<stop offset="1.000" stop-color="#FFE66D" />
</linearGradient>
</defs>
<rect width="1200" height="600" fill="url(#g)" />
</svg>