How to Create Beautiful CSS Gradients (Without a Designer)

What is a CSS gradient, exactly?

A CSS gradient is a smooth blend between two or more colours, drawn by the browser itself — no image file is involved. You write one line of CSS, something like background: linear-gradient(135deg, #22d3ee, #8b5cf6), and the browser paints the blend every time the page loads. Because the gradient is code, not a picture, it is razor sharp at any size, it costs almost nothing to download, and it never goes blurry on a large screen. That is why gradients are everywhere on the modern web: behind hero sections, on buttons, on cards, and as the background of whole pages.

There are two kinds of gradient you will actually use. A linear gradient blends in a straight line, in a direction you choose with an angle — 135 degrees runs from the top-left corner to the bottom-right, which is the most common choice for hero backgrounds. A radial gradient blends outwards from a centre point, like a spotlight, which works well behind a single headline or a circular badge. Everything else — repeating gradients, conic gradients, hard stops — is a variation on these two ideas, and for most designs you will never need them.

The important thing to understand is that a gradient is just a background. It behaves like any other background in CSS: it sits behind the text, it can be layered under other backgrounds, and it can be swapped for a solid colour on small screens if you prefer. That makes it safe to use. If an old browser cannot draw a gradient, it falls back to the solid background colour you set first, and the page still looks fine.

Linear or radial — which one should you choose?

Choose linear when the gradient has to fill a wide area: a hero banner, a page background, a button, or a card. A linear blend reads as calm and modern, and it does not fight with the text on top of it. The classic choice is a diagonal blend, 135 degrees, between two colours that sit near each other on the colour wheel — blue into violet, teal into green, pink into orange. The diagonal gives the blend movement without making it loud.

Choose radial when you want a focal point. A radial gradient is brightest in the middle and fades towards the edges, so it pulls the eye to the centre — good behind a headline, a price, or a call-to-action button. It is also the right choice for circular shapes: a radial blend inside a round badge or avatar looks natural, while a linear blend across a circle can look striped. If the radial blend looks like a target, soften it by making the two colours closer together, or by starting the blend further out.

If you are unsure, start with linear at 135 degrees. It is the safest gradient in web design, and it works with almost any colour pair. Save radial gradients for the one element on the page that deserves the spotlight.

Choosing colours that actually work together

The most common gradient mistake is picking two colours that are too far apart. Red into green, or yellow into blue, produces a muddy middle where the colours cross — the blend passes through a grey or brown tone that looks dirty. The fix is simple: pick colours that are neighbours on the colour wheel, or pick two shades of the same colour, one light and one dark. Blue into violet, teal into blue, pink into purple — these blends stay clean all the way across.

A second way to choose is to start from a brand colour and add one neighbour. Take your main colour, then pick the colour next to it on the wheel for the second stop, and the colour after that for a third stop. Three stops give the blend more depth than two, but only if the middle colour sits between the other two. If the middle stop is a random bright colour, the gradient looks like a rainbow, which is rarely what you want. Keep the stops in order, and keep the steps even.

Always check the text on top of the gradient. White text needs a dark enough background at the point where the text sits, so test the gradient with the real headline on it, not on its own. If part of the gradient is too light for white text, darken that stop, or add a dark overlay behind the text. A gradient that looks beautiful empty and unreadable with text on it is a failed gradient.

Angles, stops and the details that matter

The angle sets the direction of a linear blend. Zero degrees runs bottom to top, 90 degrees runs left to right, 180 degrees runs top to bottom, and 135 degrees runs diagonally from top-left to bottom-right. Small changes in angle change the feel: a near-vertical blend feels calm, a diagonal feels energetic, a horizontal blend feels wide. Try 120 to 150 degrees first — that diagonal range flatters almost every layout.

Stops set where each colour reaches full strength. A stop at 0% means the first colour starts at full strength at the edge; a stop at 100% means the last colour finishes at the far edge. Moving the middle stop changes the balance: put it at 30% and the first colour dominates, put it at 70% and the second colour dominates. Two stops at the same position make a hard edge instead of a blend, which is how people make striped backgrounds — useful, but only when you want stripes.

For the best results, keep the number of stops small. Two stops are enough for most designs, three stops add depth, and four or more usually look busy. And remember that the gradient you see on your screen is the gradient your visitors will see — there is no compression or colour shift, because the browser draws it fresh every time.

Using gradients in a real design

The most useful place for a gradient is the hero section — the big banner at the top of a page. A gradient hero with white text and one clear button looks professional with almost no other design work, which is why so many landing pages use one. Keep the hero gradient subtle: two neighbouring colours, a diagonal angle, and plenty of white space around the text. The gradient should support the headline, not compete with it.

Buttons are the second-best use. A gradient button stands out from flat buttons without needing a shadow or a border, and it signals that this button is the main action on the page. Use the same two colours as your hero gradient, so the button feels like part of the same design. Do not put a gradient on every button — one gradient button per page is enough, and the rest should be plain.

Cards, section dividers and image overlays are the third use. A thin gradient strip at the top of a card, or a gradient overlay on a photo to make white text readable, adds polish without much effort. The rule for all of these is the same: one gradient per page section, two or three colours, and always check the text on top. A gradient used sparingly looks designed; a gradient on everything looks like a demo.

Frequently asked questions

Do I need to install anything to use a CSS gradient?

No. A CSS gradient is a few lines of code in your stylesheet. There is nothing to install, no image to upload, and no library to load — every modern browser draws gradients on its own.

Will a gradient work in all browsers?

Yes, in every modern browser. Very old browsers ignore the gradient and show the solid background colour you set before it, so always set a plain background colour first as a fallback.

How many colours should a gradient have?

Two colours are enough for most designs, and three add depth. Four or more usually look busy. Keep the colours close together on the colour wheel so the middle of the blend stays clean.

Can I download the gradient as an image?

Yes. The CSS Gradient Generator on this site can download the gradient as a 1200 × 800 PNG, which is useful for a presentation, a social post, or anywhere you cannot use CSS.

Why does my gradient look muddy in the middle?

The two colours are too far apart on the colour wheel, so the blend passes through a grey or brown tone. Pick colours that sit next to each other, or two shades of the same colour.