How to make a CSS gradient online, free and private
A CSS gradient generator turns an angle and a list of color stops into a background rule. To make one here, press Linear, Radial or Conic under Gradient Type, set the Angle or the Center, edit the Color Stops, then click Copy under CSS Code. The default output is background: linear-gradient(90deg, #667EEA 0%, #764BA2 100%);.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). Favorites stay in this browser’s local storage. You can also download a PNG, or an SVG for linear and radial types.
The generator writes one plain linear-gradient(), radial-gradient() or conic-gradient() with a degree angle and every stop position as a percentage. It does not write repeating gradients, color hints or shape keywords: radial gradients are always a circle. Once you have a background, pick matching colors with the color picker or convert them with the color code converter.
Table of Use: common gradients and the CSS they write
| Job | Set | CSS written (the part before the stops) |
|---|---|---|
| Left-to-right button or banner | Linear, Angle 90° | linear-gradient(90deg, …) |
| Header fading down the page | Linear, Angle 180° | linear-gradient(180deg, …) |
| Diagonal hero background | Linear, Angle 135° (the Ocean preset) | linear-gradient(135deg, …) |
| Spotlight behind a card | Radial, Center X 50%, Center Y 50% | radial-gradient(circle at 50% 50%, …) |
| Glow from a corner | Radial, Center X 0%, Center Y 0% | radial-gradient(circle at 0% 0%, …) |
| Color wheel or pie-chart background | Conic, the Rainbow preset | conic-gradient(from 0deg at 50% 50%, …) |
| Hard edge between two colors | Two stops at the same position | Stops such as #FF512F 50%, #F09819 50% |
| Fade out to transparent | Last stop typed as rgba(0, 0, 0, 0) | Final stop rgba(0, 0, 0, 0) 100% |
| Social share image | Image size 1200 × 630, then PNG | A file named like gradient-linear-1200x630.png |
| 4K wallpaper | Image size 3840 × 2160, then PNG | A file named like gradient-radial-3840x2160.png |
Stops are written in position order, each as a color and a percentage. Gradients pair well with a box shadow or rounded corners from the border radius generator. For a share image page, add the matching tags with the Open Graph generator.
Features
- Three gradient types. Linear uses an Angle slider from 0° to 360°. Radial uses Center X and Center Y from 0% to 100%. Conic adds a Starting Angle to the center.
- Any number of color stops. Each stop has a color picker, a text field and a position slider from 0% to 100%. Add Stop adds one with a random color. Two stops is the minimum, and the trash button is disabled at two.
- Any CSS color. Hex, rgb(), hsl(), oklch() and named colors work, and rgba() or 8-digit hex gives transparency. An invalid entry turns red with the reason, and the gradient keeps the last valid color.
- Presets, Random and favorites. Eight presets: Sunset, Ocean, Purple Haze, Fresh Mint, Fire, Rainbow, Emerald and Rose. Random makes a new gradient of any type with 2 to 4 stops. Save to favorites keeps one in this browser.
- PNG and SVG downloads. Eight size choices including 1920 × 1080 (the default), 3840 × 2160 and a custom size, drawn with the same angle, center and stops as the CSS. SVG is offered for linear and radial only.
- Private and free. No account and no upload. If the browser blocks the clipboard, the Copy button says so and you can select the code by hand.
To trim the finished stylesheet, run it through the CSS minifier, or reformat it with the CSS beautifier.
How to use the gradient generator
- Under Gradient Type, press Linear, Radial or Conic, or start from a gradient under Preset Gradients or press Random.
- For Linear, drag Angle (0° is bottom to top, 90° is left to right, 180° is top to bottom). For Radial or Conic, drag Center X and Center Y; Conic also has Starting Angle.
- Under Color Stops, change each color with the picker or by typing a CSS color, and drag its position. Press Add Stop for another color.
- Check the Preview, which uses the same CSS you will copy.
- Click Copy under CSS Code and paste the rule into your stylesheet, or paste it into the HTML previewer to see it on a page first.
- To download an image, choose Image size (pixels) under Download as an image, then click PNG or SVG.
- Press Save to favorites to keep the gradient for later in this browser.
Who can use it
- Front-end developers who want a ready-to-paste background for a hero section, button or card.
- Designers who need a gradient as a file: a 1200 × 630 share image, a 4K wallpaper or an SVG.
- Bloggers and marketers making simple cover backgrounds without opening an image editor, then turning an SVG into CSS with the SVG to CSS converter.
- Students and layout builders learning how angles and stops work, or pairing a background with a flexbox layout or an animation.
FAQs
How do I make a CSS gradient?
Write a gradient function as the value of background: linear-gradient(90deg, #667EEA 0%, #764BA2 100%). It needs a direction and at least two color stops, each a color and a position. This generator builds that line for you. Choose Linear, Radial or Conic, set the angle or center, edit the stops, then click Copy under CSS Code and paste the rule into your stylesheet.
What is the difference between linear, radial and conic gradients?
A linear gradient blends colors along a straight line at an angle. A radial gradient blends outward from a center point in a circle, which suits glows and spotlights. A conic gradient sweeps around a center point like a clock hand, which suits pie charts, progress rings and color wheels.
Which angle makes a CSS gradient go left to right?
Use 90deg. In CSS, 0deg runs bottom to top, 90deg left to right, 180deg top to bottom and 270deg right to left. The Angle slider here covers 0 to 360 degrees and always writes a degree value, never keywords such as to right. On a box that is not square, 45deg is not the same as to top right, so check the preview.
How do I make a CSS gradient fade to transparent?
Give the last stop a transparent color: type rgba(0, 0, 0, 0) or an 8-digit hex such as #00000000 into the stop’s color field. Browsers blend with premultiplied alpha, so the color fades out instead of passing through gray, and this tool’s preview and PNG export follow the same rule.
How do I make a hard edge between two colors in a gradient?
Put two stops at the same position. For example, set the first color at 50% and the second color at 50%, and the browser switches from one to the other at that exact point with no blend. In this tool, press Add Stop, then drag both position sliders to the same percentage.
Can I download a CSS gradient as a PNG or SVG?
Yes. Under Download as an image, pick a size from 800 × 600 up to 3840 × 2160 (4K), a 1080 × 1080 square, a 1200 × 630 share image, or a custom size, then click PNG. Linear and radial gradients can also be saved as SVG; SVG has no conic gradient, so conic downloads as PNG only. Custom sizes are limited to 8,192 pixels a side and 16,777,216 pixels in total.
Which color formats can I use for gradient stops?
Any CSS color your browser accepts and this tool can draw: hex (#667EEA), rgb(), rgba(), hsl(), a name such as teal, or newer formats like oklch(). Use rgba() or 8-digit hex for transparency. var(), currentColor and system colors are refused because they depend on the page you paste into. An invalid entry turns red, and the gradient keeps the last valid color.
Does this gradient generator upload my gradients?
No. The preview, the CSS and the PNG or SVG files are all produced in your browser, so nothing is uploaded (you can check the Network tab in DevTools). Gradients you save with Save to favorites are kept in this browser’s local storage on this device only. They do not sync, and clearing your site data deletes them.