TidyFigure

CSS Gradient Generator

  • 100% free
  • No sign-up
  • Runs in your browser

Pick a type (linear, radial or conic), set the angle and add colour stops, then copy the CSS. A two-colour linear gradient looks like background: linear-gradient(135deg, #ff5b35 0%, #ffb347 100%);. The generated code also includes a solid fallback colour, and you can download the gradient as a 1920×1080 PNG for slides or wallpapers.

Colour stops

CSS

Everything runs in your browser. Nothing you type is sent anywhere.

The three kinds of CSS gradient

linear-gradient(135deg, #ff5b35 0%, #ffb347 100%) → colours change along a straight line at an angle radial-gradient(circle, #4facfe 0%, #00f2fe 100%) → colours spread outwards from the centre conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red) → colours sweep around the centre, like a colour wheel or pie chart

Angles in linear gradients

In CSS, 0deg points up and angles go clockwise: 90deg goes left to right, 180deg top to bottom, and 135deg from the top-left corner to the bottom-right. You can also write directions in words, like to right or to bottom left.

Colour stops

Each stop is a colour and a position (0% is the start, 100% the end). Between stops the colours blend smoothly. Some tricks:

  • Hard edges: put two stops at the same position, like #ff5b35 50%, #191f24 50%, for a sharp split with no blend.
  • Transparency: lower a stop's opacity to fade into the background. This is great for darkening the bottom of a photo so text on it stays readable.
  • Three or more colours make richer backgrounds. Keep them in the same hue family to avoid muddy middles.

Text over a gradient

.hero { background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%), url(photo.jpg) center / cover; }

Several backgrounds can be layered by separating them with commas: the first one is drawn on top. Check that text has enough contrast at both ends of the gradient.

Gradient text

.title { background: linear-gradient(90deg, #ff5b35, #ffb347); -webkit-background-clip: text; background-clip: text; color: transparent; }

Browser support

Linear and radial gradients work in every browser in use today without prefixes. Conic gradients have worked in all major browsers since 2020. The first background: line in the generated CSS is a solid colour that very old browsers use instead.

Tips for good gradients

  • Neighbouring hues (orange to yellow, blue to cyan) blend more cleanly than opposites (red to green), which can turn grey in the middle.
  • Subtle gradients, two shades of the same colour, look more professional for buttons and cards than bold rainbows.
  • Use the colour converter to get HEX, RGB or HSL codes from your brand colours.

Frequently asked questions

How do I make a gradient in CSS?

Use background: linear-gradient(angle, colour1, colour2). For example: background: linear-gradient(90deg, #ff5b35, #ffb347);

What is the difference between linear, radial and conic gradients?

Linear changes along a line, radial spreads out from a centre point, and conic sweeps around a centre like a pie chart.

How do I make a transparent gradient?

Lower the opacity of a colour stop. The CSS uses rgba() colours that fade into whatever is behind.

Can I download the gradient as an image?

Yes. Download PNG saves it at 1920×1080, ready for slides, wallpapers or social posts.

Do CSS gradients work in all browsers?

Yes. Linear, radial and conic gradients work in all current browsers without prefixes.

Last updated October 2026 · More developer tools