Terracotta Dusk
linearA warm terracotta dusk gradient.
The Earthy Range of Terracotta Dusk
Terracotta Dusk moves from warm clay orange through a deeper burnt red and lands on near-black, giving it the widest value range of the warm gradients. That makes it feel grounded and editorial, closer to a sunset over desert rock than to a candy-colored promotional gradient. It suits crafts, ceramics, outdoor gear, and lifestyle brands with a natural, no-nonsense tone.
Light text works on the dark end of the ramp and struggles near the terracotta start, so place cream or off-white headlines over the right side of the gradient. The 160 degree angle is nearly vertical but carries a slight diagonal, which keeps the darker end from feeling like a hard edge. Because the palette is so warm, pair it with a cool neutral like slate or sage for borders and secondary surfaces.
The sequence from clay to burnt red to near-black gives you three usable zones in one panel. Light cream text belongs on the right two thirds; the left edge, where the clay is lightest, is where white copy fails, so left-align the headline and pull it off the gradient start. When the gradient fills a card, the dark tail can swallow small badges and borders, so add a hairline border in a lighter warm tone to define the edge. The 160 degree angle keeps the darkest zone at the bottom right, which suits a layout with the action button in that corner.
position 0%
position 50%
position 100%
background: linear-gradient(160deg, #F4A261 0%, #E76F51 50%, #2A2A2A 100%);:root {
--gradient-terracotta-dusk: linear-gradient(160deg, #F4A261 0%, #E76F51 50%, #2A2A2A 100%);
}
.gradient-terracotta-dusk {
background-image: var(--gradient-terracotta-dusk);
}<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
<defs>
<linearGradient id="g" x1="32.90%" y1="3.02%" x2="67.10%" y2="96.98%">
<stop offset="0.000" stop-color="#F4A261" />
<stop offset="0.500" stop-color="#E76F51" />
<stop offset="1.000" stop-color="#2A2A2A" />
</linearGradient>
</defs>
<rect width="1200" height="600" fill="url(#g)" />
</svg>