CSS gradient

Sunset Gradient

A sunset gradient moving from twilight purple through pink and orange to golden yellow.

A stylized sunset progression intended for expressive backgrounds rather than natural-color measurement.

Sunset gradients work because they intentionally cross warm and cool hue families. Stop order and spacing determine whether the transition feels natural or abrupt.

Gradient stops

Twilight #5B21B6 0%

Pink #DB2777 36%

Orange #F97316 70%

Gold #FBBF24 100%

CSS

.example {
  background: linear-gradient(135deg, #5B21B6 0%, #DB2777 36%, #F97316 70%, #FBBF24 100%);
}

Gradient contrast varies across the surface. Test important text against every area it may overlap instead of relying on a single midpoint color.

Angle previews

90°

135°

180°

Ready-to-use variations

Soft dusk

Muted low-contrast sunset.

linear-gradient(135deg, #7C6FA8 0%, #D88C9A 45%, #F6C177 100%)

Hot sunset

Saturated expressive progression.

linear-gradient(130deg, #7C3AED 0%, #DB2777 38%, #F97316 72%, #FBBF24 100%)

Desert dusk

Dustier earth-toned sunset.

linear-gradient(160deg, #4A2C4F 0%, #85445B 45%, #D97757 75%, #F1C27D 100%)

Tuning tips

Use uneven stop positions to keep one color family dominant.
Text contrast can change quickly through pink/orange/yellow regions.
For a photographic feel, sample a real image instead of assuming one universal sunset palette.