Gradient background
A gradient background blends two or more colours across the screen. This one opens as a warm coral-to-pink blend with a touch of grain, so you only change what you don't like and then copy the CSS or save a PNG.
Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.
At a glance
- What a CSS gradient is
- An image, not a colour: it has no size of its own and fills whatever box it's on
- Source: developer.mozilla.org, checked 2026-11
- Kinds of CSS gradient
- Linear, radial and conic, each with a repeating version
- Source: developer.mozilla.org, checked 2026-11
- Default direction
- to bottom, the same as 180deg; 0deg points up and 90deg points right
- Source: developer.mozilla.org, checked 2026-11
- Largest PNG
- 4096 × 4096 pixels
Want a page that already looks finished?
A free Liite page comes with 15 themes, from soft sunset tones to plain black and white, plus gradient and pattern wallpapers of your own. Pick one, add your links, and your page is live at liite.co/yourname.
Gradient background: what to know
This page starts the background generator for this case. For every option and how to use it, see the background generator.
Choosing colours that blend well
Colours that sit next to each other on the colour wheel, such as coral and pink here, blend smoothly. Colours from opposite sides can turn muddy in the middle: in this tool, pure blue (#0000ff) to pure yellow (#ffff00) passes through flat grey halfway across. Add a third stop in between, such as a green or a pink, to steer the blend.
For a background behind text or buttons, keep the stops close in lightness. Then one text colour works across the whole gradient. For a hero image or a phone wallpaper with nothing on top, you can push the contrast much further.
A gradient for a website or UI design
On a website, copy the CSS rather than the PNG. It's a few hundred bytes, stays sharp on any screen and needs no image request. Put it on the page body or on a single section, and give buttons a solid colour so they don't get lost in the blend.
Questions
What is a gradient background?
A background that fades from one colour into another, along a line (linear) or outwards from a point (radial). In CSS it's written with linear-gradient() or radial-gradient() and counts as an image, so it goes in the background property.
How do I make a gradient background?
Pick two to four colours, set where each one sits and the angle, then copy the CSS or download a PNG. Press Randomise if you want ideas to start from.
What is the best gradient for a background?
One with two or three related colours and a gentle angle, so text stays readable everywhere on it. Save the bold, high-contrast blends for images with nothing on top.