Linear Gradient Generator
Blend colors along a straight line at any angle from 0 to 360 degrees. Use the direction buttons for quick angles or the slider for exact control.
CSS Gradient Generator
Design linear, radial and conic gradients visually, then copy the CSS code or download the gradient as an image. Fast, free and no signup.
- 100% free
- No Signup
- No watermark
Color stops
Drag the handles to move a color. Click the bar to add a stop.
CSS code
Your Privacy Matters
Everything happens in your browser. Nothing you design is uploaded or stored.
How to create a CSS gradient
1Choose a type
Pick Linear, Radial or Conic, or start from one of the ready-made presets.
2Set your colors
Change the colors, drag the stops, and adjust the angle, shape or position.
3Copy the CSS
Copy the code into your stylesheet, or download the gradient as a PNG image.
CSS GRADIENT GUIDE
CSS Gradient Generator – Create Linear, Radial and Conic Gradients Online
Looking for a free CSS gradient generator? Design a gradient background visually and get the CSS code instantly. Choose between linear, radial, and conic gradients, add up to eight color stops, drag them into place, and watch the live preview update as you work. When you are happy with the result, copy the CSS with one click, or download the gradient as a PNG image. Everything runs in your browser, so nothing is uploaded, and there is no signup or watermark.
Radial and Conic Gradients
Create radial gradients that spread out from a point as a circle or ellipse, or conic gradients that sweep around a center like a color wheel.
Copy the CSS Code
Get clean CSS with a solid fallback color, ready to paste into your stylesheet. You can also download the gradient as an image in several sizes.
How to Create a CSS Gradient Online
You do not need to write gradient code by hand. Use the online gradient generator by following these simple steps.
- Pick a gradient type: Choose Linear, Radial, or Conic, or click a preset to start from a ready-made gradient.
- Set the colors: Click a color swatch to choose a color, or type a HEX code. Use Add color for more stops, and Reverse to flip the order.
- Position the stops: Drag the handles on the color stops bar, or type an exact position from 0% to 100%. Click the bar to add a stop where you click.
- Adjust the direction: Set the angle for linear and conic gradients, or choose the shape and center position for radial gradients.
- Copy or download: Click Copy CSS to copy the code, or choose an image size and click Download PNG.
The generator supports 2 to 8 color stops. A line such as background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%); is all you need to use the result in your CSS.
Linear, Radial and Conic Gradients Explained
CSS offers three kinds of gradients. Each one blends colors in a different way.
- Linear gradient: Colors change along a straight line. The angle sets the direction: 0deg points up, 90deg points right, 180deg points down, and 270deg points left.
- Radial gradient: Colors spread out from a center point in a circle or an ellipse, like a glow or a spotlight.
- Conic gradient: Colors sweep around a center point, like the slices of a pie or a color wheel. The start angle decides where the sweep begins.
What Are Color Stops?
A color stop is a color placed at a position along the gradient. The browser blends smoothly from one stop to the next. With two stops you get a simple fade, and with more stops you can build richer gradients with several bands of color. Moving two stops close together makes the change between them sharper, while spreading them apart makes it softer.
Using Gradients in Your Design
- Backgrounds: Add depth to hero sections, cards, and full-page backgrounds.
- Buttons and banners: Make calls to action and promotional areas stand out.
- Overlays: Place a gradient over a photo to improve the readability of text.
- Images and wallpapers: Download a gradient as a PNG to use as a wallpaper, a slide background, or a social media graphic.
When text sits on top of a gradient, check that it stays readable across the whole background, not just at one end.
Free CSS Gradient Generator Online
Our free CSS gradient generator makes it easy to design a gradient and get production-ready code. Experiment with presets, generate random gradients for inspiration, and export your favorite result. The tool is designed for convenient gradient creation without signup or a watermark, and it works on desktop and on mobile browsers.
COMMON QUESTIONS
Frequently Asked Questions About CSS Gradients
Find answers to common questions about creating CSS gradients and using the generated code.
How do I create a CSS gradient?
Choose a gradient type, set your colors and their positions, and adjust the angle or shape. The preview updates as you work, and the CSS code below it is always ready to copy.
How do I copy the CSS code?
Click Copy CSS above the code box. Then paste it into your stylesheet, for example inside a rule for your element's background.
What is the difference between linear, radial and conic gradients?
A linear gradient blends colors along a straight line, a radial gradient spreads colors outward from a center point, and a conic gradient sweeps colors around a center point like a color wheel.
How does the angle work in a linear gradient?
The angle sets the direction of the color change. 0 degrees points up, 90 degrees points to the right, 180 degrees points down, and 270 degrees points to the left. Angles in between create diagonal gradients.
What are color stops, and how many can I use?
A color stop is a color at a certain position along the gradient. You can use from 2 to 8 color stops in this generator.
How do I add, move or remove a color stop?
Click Add color or click the color stops bar to add a stop. Drag a handle, or use the left and right arrow keys when it is selected, to move it. Use the Remove button next to a color to delete it, as long as at least two colors remain.
Why does the CSS code start with a solid color line?
The first line is a fallback color. A browser that does not understand gradients uses it, and a browser that does understand gradients simply replaces it with the gradient on the next line.
Can I download the gradient as an image?
Yes. Choose an image size, such as 1920 × 1080 or 1080 × 1080, and click Download PNG. The image uses the same colors, positions, angle, and shape that you see in the preview.
Why can't I download a conic gradient as a PNG?
Drawing a conic gradient into an image needs a newer browser feature. If your browser is older, update it, or copy the CSS code instead, which works for the live page.
Does the generator support transparent colors?
No. The generator works with solid, opaque colors. You can add transparency yourself afterwards by changing a color in the CSS to a value with an alpha channel.
Is my data sent to a server?
No. The gradient generator runs in your browser, and nothing you design is uploaded or stored.
Is this CSS gradient generator free?
Yes. You can create CSS gradients online for free, with no signup and no watermark.
Need more free tools?
Merge, split, compress and convert files in seconds. Explore everything in one place.
All Tools