Gradient Background Generator
The Gradient Background Generator builds a linear, radial or conic gradient from two to eight colors. You see the result live, copy the CSS, or download the gradient as a PNG at the size you choose, up to 8192 pixels on each side. It is free and needs no account. The gradient is made in your browser, and nothing is uploaded.
- The preview, the CSS and the PNG are all made from the same settings, so they match.
- A PNG can be up to 8192 pixels on each side. A very large picture needs a lot of memory, and a phone or an older computer may refuse it. If so, try a smaller size.
- Everything runs in your browser. Nothing is uploaded and nothing is saved.
- %
- %
- %
The PNG is drawn in your browser from the settings above. Nothing is uploaded.
In one sentence
A free online gradient maker that builds a linear, radial or conic gradient from 2 to 8 color stops, shows it live, copies the CSS, and downloads a PNG up to 8192 pixels on each side, all in your browser.
Key facts
- Types: linear (angle 0 to 360 degrees), radial (circle or ellipse, centered) and conic (start angle 0 to 360 degrees); 2 to 8 color stops, each with a hex color and a position from 0 to 100 percent.
- Output: one line of CSS, for example background with a linear-gradient value, and a PNG of any size from 1 to 8192 pixels on each side; the PNG has no transparency.
- Presets: 26 ready-made gradients that can be filtered by Dark theme, Black, Green, Blue, Purple and pink, Orange and red, and Light and pastel.
- It makes linear, radial and conic gradients only; it does not make mesh gradients.
- Free, with no account, no human check and no daily limit, because the gradient is made on your device.
Sources
Last reviewed:
How it works
- Start from the Sunset gradient that is already loaded, or press a preset under "Presets" to load another one.
- Choose the type, Linear, Radial or Conic. For Linear and Conic, set the angle in degrees. For Radial, choose Circle or Ellipse.
- Change a color by pressing its square or by typing a hex code such as
- Press Copy CSS to copy the background line. Paste it into your stylesheet.
- To get a picture, type a width and a height under "PNG size", or press a common size, then press Download PNG.
How to use the gradient background generator
The tool has three parts. The controls on the left set the type, the angle and the colors. The preview and the CSS box on the right show the result as you change it. The PNG size box and the presets sit below.
Nothing needs a button press to update. Change a color or an angle and the preview, the CSS and the PNG settings follow. The page opens with the Sunset gradient so you can see how it works before you change anything.
Linear, radial and conic gradients
A linear gradient blends colors along a straight line. Choose Linear to use this page as a linear gradient generator. The angle sets the direction of that line in degrees. 0 degrees runs from the bottom to the top, 90 degrees runs from left to right, 180 degrees runs from the top to the bottom, and 270 degrees runs from right to left. Any whole number from 0 to 360 works.
A radial gradient blends colors outward from the center of the picture. Circle gives a round blend that reaches the farthest corner. Ellipse follows the shape of the picture, so a wide picture gets a wide oval.
A conic gradient blends colors around the center, like the face of a clock. The start angle turns where the first color begins, with 0 degrees at the top. A conic gradient with the same color at both ends makes a smooth color wheel.
Color stops and positions in the color gradient generator
Every gradient is a list of color stops. A color stop is one color placed at one position, from 0 percent at the start to 100 percent at the end. The gradient blends smoothly from one stop to the next.
You need at least two colors and can use up to eight. Add color puts a new stop in the widest gap, with a color halfway between its neighbors. Reverse flips the order of the colors, so the first color becomes the last. Remove deletes a stop, and the button is switched off when only two are left.
If two stops sit at the same position, the color changes at once instead of blending. This makes a hard edge, which is useful for stripes. The list is sorted by position in the CSS, so you can set the stops in any order.
Copy the CSS (gradient generator css)
The CSS box shows one line that you can paste into a stylesheet, for example background with a linear-gradient value. The line is plain CSS, so it works on any element and does not need a library. Press Copy CSS, or click the box to select the text.
Colors are written as six-digit hex codes. If you type a short code such as
Gradients written in CSS stay sharp at any size and add no image to download, so a CSS gradient is usually the better choice for a web page. Use the PNG when you need a picture, for example for a slide, a social post or a design file.
Download a gradient as a PNG (gradient image generator)
Type a width and a height in pixels under "PNG size", or press a common size such as 1920 x 1080, 1280 x 720, 3840 x 2160, 1080 x 1080 or 1080 x 1920. Then press Download PNG. The file is named with its size, for example gradient-1920x1080.png.
Each side can be any whole number from 1 to 8192. A picture of 8192 x 8192 pixels has about 67 million pixels, and your browser needs a few hundred megabytes of memory to draw it. If the browser cannot make a picture that large, the page says so, and you can try a smaller size.
The PNG is drawn with the same rules as CSS, so a corner of the picture gets the first or last color just as it does in the preview. The PNG has no transparency and uses 8 bits for each color channel, so a very soft blend between close colors can show faint bands.
For a JPG or WebP file instead, open the PNG in the PNG to JPG or PNG to WebP tool on this site.
Dark theme, black, green and blue gradient presets
The presets are a quick start. Each one is a full gradient that you can load and then change. The buttons above the presets filter the list by look: Dark theme, Black, Green, Blue, Purple and pink, Orange and red, and Light and pastel.
Dark theme presets such as Midnight, Carbon and Night forest use deep colors that suit a dark interface or a dark slide. Black presets such as Ink to charcoal and Black to violet start from pure black. For a black gradient in CSS, load one and press Copy CSS.
Green presets such as Mint, Fresh green and Forest give you green gradient colors for a button, a banner or a card. Blue presets such as Sky, Ocean and Deep blue do the same for blue.
Every preset is a normal gradient, so pressing it changes the type, angle and colors. If you do not know which colors to pick, the presets work as a gradient color generator: load one, then change any color you like.
Gradient wallpaper maker and background sizes
You can use the PNG size box as a gradient wallpaper maker. Press 1080 x 1920 for a tall phone background, 1920 x 1080 for a desktop background, or 3840 x 2160 for a 4K screen, then download the picture.
Type your own size if your screen is different. The preview takes the shape of the size you type, so you can see how the gradient will sit in that frame.
Mesh gradient generator: what this page does and does not do
This page makes smooth gradients along a line, out from the center or around the center. It does not make mesh gradients, which blend several colors from many points on a grid.
For a soft look that is close to a mesh, try the Radial type with three or four colors.
Privacy: nothing is uploaded
The preview, the CSS and the PNG are made on your device, in your browser. Your colors and sizes are not sent to a server, and the picture you download is never uploaded.
The tool is free, needs no account and has no daily limit. It has no API.
Questions
How do I make a gradient background with this gradient maker?
Pick a type, set the angle, and choose at least two colors. The preview updates at once. Then press Copy CSS to use it in a web page, or set a size and press Download PNG to get a picture.
How do I get the CSS for a gradient?
Press Copy CSS under the preview. It copies one line, such as a background with a linear-gradient value, that you can paste into your stylesheet.
What is the difference between linear, radial and conic gradients?
A linear gradient blends along a straight line at the angle you set. A radial gradient blends outward from the center. A conic gradient blends around the center, like the face of a clock.
How many colors can a gradient have?
A gradient can have from two to eight colors. Each color has a position from 0 to 100 percent.
How big can the PNG be?
Each side can be up to 8192 pixels. A picture that large needs a lot of memory, and a phone or an older computer may not be able to make it. If the page cannot make the picture, it tells you, and you can choose a smaller size.
Is the PNG the same as the preview?
Yes. The PNG is drawn from the same settings with the same rules as CSS, so the colors and the angle match the preview. The PNG has no transparency.
Can I make a black gradient or a dark theme gradient?
Yes. The presets include dark theme and black gradients such as Midnight, Carbon and Black to violet. Load one, change any color you like, and copy the CSS.
Can I make a mesh gradient?
No. This tool makes linear, radial and conic gradients. A mesh gradient blends colors from many points, which this page does not do. A radial gradient with three or four colors gives a soft look that is close to it.
Can I type my own colors?
Yes. Press the color square, or type a hex code with three or six digits in the box next to it. A short code such as
Is the gradient background generator free?
Yes, it is free. There is no account, no human check and no daily limit, and the gradient is made in your browser, so nothing is uploaded.
Need images or PDFs from your own code?
This generator runs in your browser and does not use the API. To turn text or HTML into an image or a PDF from your own code, the render API does that. A free account includes 100 credits a month.