How to make a CSS gradient background

Give your background something to do

A CSS gradient blends colours into a background for a website, banner, button, or card. The browser draws it from a CSS rule, so there is no image file to export and upload. BitSize’s free CSS gradient generator lets you choose two colours and preview the result before copying that rule into your site.

Start with one part of the page that could use a little emphasis. A banner behind your main heading is a good place to try it; every available surface is probably getting carried away.

Choose two colours that work together

If your website already has a colour palette, start there. Two similar shades can give a background some depth without demanding much attention. Colours further apart can make a stronger statement, but look at the blend between them as well as the ends. Two lovely colours can still make a fairly questionable middle.

Think about what will sit on top. A pale background may work well behind dark text; darker colours may suit light text. Keep your actual heading, paragraph, and button in mind while choosing, rather than falling in love with a background you cannot read anything on.

Linear or radial: which gradient should you use?

A linear gradient blends along a straight direction. Use the angle to run it across a banner, down a section, or diagonally across a card. In CSS, 90 degrees runs from left to right and 180 degrees runs from top to bottom.

A radial gradient spreads out from a centre point. In this tool, the first colour starts in the centre and blends towards the second in a circle. Try it when you want the colour to draw attention towards the middle. The angle control only applies to linear gradients.

Create and copy your gradient

The preview and CSS update as you make changes, so you can compare a few options without writing the code yourself. The tool keeps it to two colours, with a choice of linear or radial.

1. Open the CSS gradient generator and choose your start and end colours.
2. Choose Linear or Radial. For a linear gradient, adjust the Angle until the blend runs in the direction you want.
3. Check the whole preview, including the colours in the middle.
4. Use the copy control in the CSS panel to copy the background rule.

Open the free CSS gradient generator

Add the gradient to your website

Paste the copied background declaration inside the CSS selector for the element you want to style, between its opening and closing braces. Use the selector for your banner or card, for example, rather than applying it to the entire page by accident. If you use a website builder, check its custom CSS instructions: some fields expect a complete selector, while others accept declarations for an element you have already selected.

The generated background declaration replaces the element’s existing background settings, so check before applying it to something that already has a background image. The tool copies CSS; it does not download a PNG or SVG for use in a document.

MDN: how the CSS background property works

Check it with the actual content

Preview the finished section on a narrow phone screen and a wider desktop screen. The shape of the element affects how the gradient looks, and text may wrap over a different part of the blend. Check readability everywhere the text appears, including the middle. Use a contrast checker with the text colour and the background colours behind it; checking just one end can miss a problem.

If parts are hard to read, adjust the colours, change the text colour, or put the text on a solid background. The gradient should help the page, not make the visitor work out what it says.

Once it looks good and you can read it, you are allowed to stop adjusting the purple.

MDN: more about linear and radial CSS gradients