Skip to content

CSS Gradient Generator

Design linear and radial CSS gradients with up to five colour stops, copy the CSS or download a 1920×1080 image.

About CSS Gradient Generator

This CSS gradient generator lets you design smooth colour blends and copy ready-to-use code. Choose a linear or radial gradient, set the angle, and edit the colour and position of up to five stops. Presets give you a quick starting point if you are not sure which colours to use.

Copy the CSS for your website background, button or card, or download a full HD 1920×1080 PNG to use as a wallpaper, slide background or social media graphic. It works well for developers and designers alike. It runs in your browser and is free with no sign-up.

How to use CSS Gradient Generator

  1. Choose linear or radial and set the angle.
  2. Edit colours and positions of each stop (2–5).
  3. Try a preset for a quick start.
  4. Copy the CSS or download a full-HD PNG.

Frequently asked questions

Does this CSS work in all browsers?

Yes. linear-gradient and radial-gradient are supported in every modern browser without prefixes.

How does the angle work?

0° runs bottom to top, 90° left to right, 180° top to bottom — the direction the gradient flows towards.

Can I use the PNG as a wallpaper?

Yes. The download is 1920×1080 pixels, ideal for desktop wallpapers, slides and YouTube thumbnails.

How do I make a gradient background in CSS?

Design the gradient here, click Copy CSS and paste the background property into the element's style rule, for example on body or a section.

What is the difference between linear and radial gradients?

A linear gradient blends along a straight line at the angle you choose; a radial gradient spreads outward from a centre point in a circle or ellipse.

People also search for

css gradient generator · css gradient generator online · free css gradient generator · background generator free · css gradient generator background · css gradient generator tool · css gradient · css gradient online · background generator online · how to css gradient background · linear gradient generator online · gradient online generator

Related tools