<gradient>

A special image type that transitions smoothly between two or more colors. Common types include 'linear-gradient()', 'radial-gradient()', and 'conic-gradient()'.

/* Usage Example */
.hero-bg {
  /* A beautiful diagonal linear gradient */
  background: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%);
}
Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

26+
3.6+
7+
12+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC