Using gradients in your html templates

In 2011 everybody was using glossy gradients in their designs, so I wrote up the two ways to build them: a gradient image, or the new CSS3 gradients. Here is the gist of that tutorial and how much simpler it has become.

Method 1: a gradient image (2011)

Before CSS3, you made the gradient in Photoshop:

1. Create a 50 × 50 px file. Width barely matters, because the image repeats horizontally.
2. Fill it with any colour, then Blending Options → Gradient Overlay, from #ffffff to #eeeeee.
3. Save for Web.
4. Make a second image for the hover state, from #ff8352 to #ff4800.

.button       { background: url(a_link.png) repeat-x; line-height: 50px; }
.button:hover { background: url(a_hover.png) repeat-x; }

Pro: it worked everywhere. Con: the height was fixed by the image, and it looked ugly if the button grew.

Method 2: CSS3 gradients (2011)

CSS3 gradients scaled with the element and needed no image, but every browser wanted its own syntax. I generated mine with the ColorZilla gradient editor and ended up with this for each state:

background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee));
background: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
background: -o-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
background: linear-gradient(top, #ffffff 0%, #eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); /* IE6-9 */

Rounded corners and shadows needed the same treatment: -moz-, -webkit-, then the standard property.

One thing in there was actually wrong: the standard linear-gradient(top, …) line. The final spec changed the direction keyword to to bottom, so that line is invalid and browsers skip it.

The same button today

<a href="#" class="button">Some text</a>

.button {
  display: inline-block;
  padding: 0.625rem 1rem;
  border-radius: 0.3em;
  color: #333333;
  text-decoration: none;
  background: linear-gradient(#ffffff, #eeeeee);
  box-shadow: 0 0 5px #cccccc;
}
.button:hover,
.button:focus-visible {
  color: #ffffff;
  background: linear-gradient(#ff8352, #ff4800);
}

• No prefixes: every current browser supports linear-gradient, border-radius and box-shadow unprefixed.
• Top to bottom is the default direction, so you don't need to bottom at all.
• No images, no fixed height: the button can hold any amount of text.
• I changed the normal text colour from #bbbbbb to #333333. Light grey on near-white was very hard to read.
• :focus-visible gives keyboard users the same highlight as mouse users.

Going further

• radial-gradient() and conic-gradient() cover circles and pie shapes.
• linear-gradient(in oklch, …) blends through a perceptual colour space, which avoids the muddy grey middle you sometimes get between two bright colours.