Backgrounds, borders and shadows

Introduction

Flat rectangles work, but a little depth and colour tell a reader what is a card, what is a button and what belongs together. All of this comes from a small group of properties which need no images and add almost nothing to the size of your page.

How it works

Backgrounds. background-color fills the padding area and the area under the border. background-image draws an image on top of that colour. Always set a background colour as well, because it shows while the image loads, and text must stay readable if the image fails.

Background images are for decoration. Anything that carries meaning should be an img with alt text, since a background image has no text alternative.

Controlling an image.

cover fills the whole box and may crop the image. contain shows the whole image and may leave empty space. The background shorthand can set all of these in a single line.

Gradients are images which the browser draws for you, so they download nothing and stay sharp. linear-gradient(to right, teal, navy) blends along a line. An angle works too, such as 135deg. radial-gradient(circle, white, skyblue) spreads from the centre. Because a gradient counts as an image, it goes on background-image or background, not on background-color.

Borders and corners. border is shorthand for width, style and colour, and a single side can be set with border-left. border-radius rounds corners. On a square box, 50% makes a circle. A very large value such as 999px gives any box fully rounded pill-shaped ends.

Shadows. box-shadow takes a horizontal offset, a vertical offset, a blur, an optional spread and a colour:

box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);

Several shadows can be separated with commas, and soft shadows that have low opacity look far more natural than dark ones. Add the keyword inset to draw inside the box. text-shadow does a similar job for text.

Opacity and alpha. opacity: 0.5 makes the element and everything in it half transparent. If you want only the background to be see-through and the text to stay solid, use an alpha colour on the background instead.

Syntax

.hero {
  background: linear-gradient(135deg, teal, navy);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}

Example

Line by line

1. .card gets rounded corners and a soft shadow, which lifts it off the page.
2. The gradient blends from white to pale cyan, diagonally.
3. .avatar is square, so 50% turns it into a circle.

Expected result

A rounded card with a soft shadow and a faint colour blend, holding a teal circle above a name.

In the real world

Cards, buttons and avatars on most modern sites are made from these exact properties. Design systems usually define a few standard shadows and corner sizes, so that all parts of an interface look as though they belong together.

Common mistakes

• Setting a gradient on background-color, where it is invalid.
• Placing important text only in a background image.
• Using opacity on a card and fading its text as well.
• Using hard, dark shadows.

Best practices

• Always give a background image a fallback colour.
• Check text contrast on top of images and gradients.
• Reuse a small set of radii and shadows.
• Use img for meaningful pictures.

Summary

Backgrounds can be colours, images or gradients, and cover and contain control how images fit. border-radius rounds corners, box-shadow adds depth, and alpha colours make a background transparent without touching its text.

Mark lesson complete