Gradients, depth and dark mode
Gradients that are not muddy, a shadow scale instead of guesswork, rounded corners that actually clip, filters, and dark mode done in one small block.
By the end you can
- Write gradients that look clean rather than muddy
- Use one shadow scale instead of inventing a new shadow each time
- Clip an image to a rounded corner, and blur what is behind a panel
- Support dark mode without writing your CSS twice
Easier if you did first
step 1 of 4
Gradients
A gradient is a fade between colours, and CSS treats it as a background image rather than a colour, which is why you write it as background, not background-color.
linear-gradient takes a direction and then the colours: linear-gradient(to bottom, #0b7d4f, #065f38). The direction can be a side, like to right, or an angle, like 135deg.
You can give each colour a position to control where it sits, and repeating the same colour twice in a row makes a hard edge rather than a fade, which is how a two-tone band is made.
radial-gradient fades outwards from a point, which suits a soft glow behind a heading.
The thing that makes gradients look cheap is fading between two colours that are far apart on the colour wheel. Blue to yellow goes through grey in the middle and looks muddy. Two shades of the same colour, or two neighbours, look expensive.
A gradient is also how you make text readable over a photograph: a dark gradient over the image, then the text above it.
Build the hero on the right: a gradient background and a readable overlay on the photograph.
.hero {
background: linear-gradient(135deg, #0b7d4f, #065f38);
}
.banner {
background:
linear-gradient(rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.55)),
url("photo.jpg");
background-size: cover;
}
to right | to bottom | 135deg the direction
#0b7d4f 0%, #065f38 100% positions, if you want themWhat these words mean
- linear-gradient
- A fade in a straight line. Written as a background, not a background-colour.
- radial-gradient
- A fade outwards from a point.
- colour stop
- A colour and, optionally, where along the fade it sits.
- background-size: cover
- Fill the box with the image, cropping rather than squashing.
- layered backgrounds
- Several backgrounds separated by commas. The first one is on top.
Easy to get wrong
background-color: linear-gradient(...)
background: linear-gradient(...)
A gradient is an image, not a colour, so background-color ignores it completely and you see nothing at all.
White text straight onto a photograph
A dark gradient layer between the two
Photographs have light patches. Text that is readable over the dark half of a picture disappears over the bright half, and you cannot control which part a visitor's screen crops to.
What we check
- There is a linear gradient
- The hero's background is the gradient
- The photo has a gradient layer on top of it
- The banner really has both layers
- The gradient is a background, not a background-color