CSS Gradient Generator
This free gradient generator lets you build linear, radial, and conic CSS gradients with a live preview, then copy the exact code you need: the bare background value, a complete CSS rule, or a Tailwind arbitrary value. Add and drag color stops, fine-tune the angle or position, and watch the result update instantly. Everything runs browser-based and client-side, so your work stays private with no signup and nothing ever uploaded.
Outputs standard CSS background values for linear, radial, and conic gradients. Paste into stylesheets, inline styles, or Tailwind arbitrary values.
How to use the gradient generator
- Pick a gradient type at the top of the tool: linear, radial, or conic. The live preview redraws the moment you switch.
- Click a color stop to open the swatch and choose a color, or type a hex, RGB, or HSL value directly.
- Add a stop by clicking on the gradient bar, and drag any stop left or right to reposition it. Remove a stop you no longer need with one click.
- Adjust the angle for linear gradients, or set the center position for radial and conic gradients, until the blend looks right.
- Copy what you need: the bare
backgroundvalue, a full CSS rule, or a Tailwind arbitrary value such asbg-[linear-gradient(...)]. - Paste it into your stylesheet, component, or design file. Because the tool is browser-based, nothing leaves your machine.
The three CSS gradient types
A CSS gradient is an image generated by the browser from two or more colors, so it scales to any size without extra files or HTTP requests. The CSS specification gives you three gradient functions, and this gradient generator supports all of them. Each one blends color the same way but follows a different shape.
Linear gradients transition color along a straight line. You set a direction with an angle or a keyword, and the colors flow from one edge to the other:
background: linear-gradient(135deg, #6366f1, #ec4899);
Radial gradients radiate outward from a center point in a circle or ellipse. They are perfect for spotlights, glows, and soft vignettes:
background: radial-gradient(circle at center, #fde68a, #f97316);
Conic gradients sweep color around a center point like the hands of a clock. They power color wheels, pie charts, and angular accents:
background: conic-gradient(from 0deg, #ef4444, #eab308, #22c55e, #ef4444);
| Gradient type | CSS function | Example syntax | Best use |
|---|---|---|---|
| Linear | linear-gradient() | linear-gradient(90deg, #000, #fff) | Backgrounds, buttons, banners, directional fades |
| Radial | radial-gradient() | radial-gradient(circle, #000, #fff) | Glows, spotlights, vignettes, soft blobs |
| Conic | conic-gradient() | conic-gradient(from 0deg, #000, #fff) | Color wheels, pie charts, angular accents |
Color stops, angles, and positions
Every gradient is defined by its color stops: the colors the browser blends between, each optionally pinned to a position. Write a stop as a color followed by a length or percentage, for example #6366f1 0%, #ec4899 100%. With only colors and no positions, the browser spaces them evenly. Add positions, and you control exactly where each color lands, including hard edges that create stripes when two stops share the same point.
For linear-gradient(), the angle sets the direction: 0deg points up, 90deg points right, and 180deg points down. You can also use keywords like to right or to bottom right. For radial-gradient() and conic-gradient(), you control the position of the center with the at keyword, such as at 30% 70%, and for conic gradients the from keyword sets the starting angle of the sweep. The generator wires these controls to sliders so you can experiment without memorizing the syntax.
Practical uses for CSS gradients
Gradients show up everywhere in modern interfaces. Use a subtle linear-gradient() as a page or section background to add depth without a heavy image. Apply one to buttons and call-to-action elements for a polished, tactile look. Lay a dark-to-transparent gradient over a photo as an overlay so caption text stays readable.
You can also clip a gradient to text. Combine background-image with background-clip: text and a transparent text color to create eye-catching gradient text for headings. Layering several radial gradients at different positions produces trendy mesh and blob effects that fill a hero section with soft, organic color. Because gradients are pure CSS, they restyle instantly with a theme change and never need to be re-exported.
Performance and accessibility notes
CSS gradients are lightweight. They add no extra network requests and are rendered by the browser, so they are typically GPU-cheap and far smaller than an equivalent background image. Animating a gradient’s colors can be more expensive, so for moving effects prefer transforming or shifting a static gradient layer rather than recalculating it on every frame.
Accessibility matters most when text sits on top of a gradient. Because the background color changes across the element, check contrast at the lightest and darkest points, not just the middle, and aim to meet WCAG contrast ratios across the whole run. A semi-transparent solid overlay behind text, or a text-shadow, is a reliable way to keep copy legible over a busy gradient. Never rely on a gradient alone to convey meaning, since color is not perceived equally by every user.
Ready-to-use gradient recipes
Sometimes you want a head start instead of a blank canvas. The palettes below are popular, on-trend color pairings you can paste straight into a stylesheet and then fine-tune in the gradient generator. Each one is a standard linear-gradient(), so swap the angle, add stops, or convert it to radial or conic once it is in the tool.
| Recipe | Vibe | CSS value |
|---|---|---|
| Sunset | Warm orange to pink | linear-gradient(135deg, #ff7e5f, #feb47b) |
| Ocean | Cool blue to teal | linear-gradient(135deg, #2193b0, #6dd5ed) |
| Purple to orange | linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045) | |
| Mint | Soft green to aqua | linear-gradient(135deg, #11998e, #38ef7d) |
| Twilight | Deep indigo to violet | linear-gradient(135deg, #4338ca, #ec4899) |
| Peach | Pale cream to coral | linear-gradient(135deg, #ffecd2, #fcb69f) |
Mesh, multi-layer, and smoother blends
A single gradient function only goes so far. To build the dreamy, multi-color mesh gradients you see on modern landing pages, stack several gradients in one background by separating them with commas. Each layer sits in front of the next, so give the upper layers transparency and offset their centers:
background: radial-gradient(at 20% 30%, #6366f1aa, transparent 50%), radial-gradient(at 80% 70%, #ec4899aa, transparent 50%), #0f172a;
The last value is a solid base color that fills any gaps. Add more radial-gradient() layers at different positions to deepen the effect.
If a two-color blend looks gray or muddy in the middle, the culprit is the color space. By default browsers interpolate in sRGB, where the midpoint of two vivid colors can desaturate into a dull band. Modern CSS lets you pick a perceptually uniform space with an interpolation keyword: background: linear-gradient(in oklch, #ef4444, #3b82f6); keeps the transition bright and even. Use in oklch for vibrant multi-hue blends and in hsl when you want the blend to sweep around the color wheel. Support covers current Chrome, Edge, Firefox, and Safari, so keep a plain sRGB gradient as a fallback for older engines.
Frequently asked questions
How do I make a CSS gradient?
Set the background or background-image property to a gradient function such as linear-gradient(), then list two or more colors. The easiest path is to build it visually in this gradient generator, adjust the stops and angle, and copy the generated code into your stylesheet.
What is the difference between linear, radial, and conic gradients?
A linear gradient blends color along a straight line in a direction you choose. A radial gradient blends outward from a center point in a circle or ellipse. A conic gradient sweeps color around a center point at increasing angles, like a clock hand. Same colors, three different shapes.
How do I add multiple colors to a gradient?
Add as many color stops as you like, separated by commas: linear-gradient(90deg, #ef4444, #eab308, #22c55e, #3b82f6). In the tool, click anywhere on the gradient bar to drop a new stop, then drag it to position. There is no practical limit on the number of stops.
How do gradient angles work?
For linear gradients the angle sets the direction of the blend: 0deg goes from bottom to top, 90deg goes left to right, and 180deg goes top to bottom. You can also use keywords like to right. Conic gradients use a from angle to set where the sweep begins.
How do I create gradient text?
Apply the gradient with background-image, add background-clip: text (with the -webkit- prefix for wide support), and set color: transparent. The gradient then shows through the letterforms. Build the gradient here and drop it into the background-image line.
Do CSS gradients work in all browsers?
Linear and radial gradients are supported across all modern browsers and have been for many years. Conic gradients are also widely supported in current versions of Chrome, Edge, Firefox, and Safari. For gradient text, include the -webkit-background-clip prefix to cover the most engines.
Can I use these gradients with Tailwind CSS?
Yes. Copy the Tailwind arbitrary value the tool generates, for example bg-[linear-gradient(135deg,#6366f1,#ec4899)], and drop it straight into a class attribute. This lets you use any custom gradient without editing your Tailwind config.
Is this gradient generator free and private?
Completely. The tool is free with no signup, and it runs entirely in your browser. Your colors and settings are never uploaded to a server, so everything you create stays on your own device.
How do I make a mesh gradient in CSS?
Stack two or more radial-gradient() layers in a single background value, separated by commas, and place each one at a different position with semi-transparent colors fading to transparent. End the value with a solid base color. The overlapping soft circles blend into the organic, multi-color look of a mesh gradient.
How do I stack multiple gradients?
List each gradient in one background property, separated by commas, for example linear-gradient(...), radial-gradient(...). Layers are painted front to back, so the first gradient sits on top. Give upper layers transparency so the ones beneath show through, and finish with a solid color as the base fill.
Why does my gradient look muddy in the middle?
Browsers blend gradient colors in sRGB by default, which can push the midpoint of two bright colors toward a dull gray. Add an interpolation keyword such as linear-gradient(in oklch, ...) to blend in a perceptually uniform space, and the middle of the gradient stays clean and vibrant.
Related design tools & guides
- Box Shadow Generator — craft layered CSS shadows with a live preview.
- Border Radius Generator — round and morph corners visually.
- Color Picker — grab hex, RGB, and HSL values for your stops.
- All free design tools — browse the full collection of browser-based utilities.