Gradient Background

Steps to make a gradient background

1. Add two or more color stops, then drag them to set where each color sits.
2. Set the angle so the blend runs the way you want, like 180deg for top to bottom.
3. Copy the background rule, and add min-height: 100vh so it fills the screen.
4. Drop a stop into the Color Picker if you need to fine-tune a shade.

What is a gradient background?

A gradient background is a smooth blend of colors set as an element’s background instead of a flat fill or a downloaded image. Because the browser paints it, there is no file to load, it stays razor sharp at any size, and it scales to any screen. It is the quickest way to add depth behind a page, a hero section, a card or a button.

Why a gradient background does not cover the full page

This is the single most searched gradient-background problem, and it is almost never the gradient’s fault. A background only stretches as far as its element, so a short page leaves the color stopping partway down with a blank strip below. The usual fixes:

How to layer a gradient over an image

A dark gradient over a photo is how readable hero text gets its contrast, but the order trips people up. In a layered background the first layer is drawn on top, so the gradient must come before the url(), not after:

How to make a mesh gradient background

Mesh and aurora backgrounds are not a special property; they are several radial gradients stacked in one declaration, each with its own position and a fade to transparent. Two rules keep them clean:

• Separate each radial-gradient with a comma in a single background value.
• Fade with rgba(…, 0), not the bare transparent keyword, to avoid a gray haze.
• Give each blob a different at position so they spread across the box.
• Keep the colors close in lightness for a soft, modern blend.
• Build and copy the stack quickly with the Gradient Generator.

Where gradient backgrounds get used

• Full-page and hero backdrops that load instantly with no image.
• Cards and panels that need a hint of depth.
• Dark overlays on photos to keep heading text readable.
• Animated backgrounds, shifting the stops with CSS keyframes.

Gradient background vs background image