CSS Gradient Generator
Create CSS linear, radial, and conic gradients with a visual editor. Drag color stops, adjust angles, toggle repeating mode, and copy the CSS. Includes presets and random generation.
CSS Gradient Generator
Build linear, radial and conic CSS gradients visually
background: linear-gradient(135deg, #6366F1 0%, #EC4899 50%, #F59E0B 100%);
Presets
What is a CSS Gradient Generator?
A CSS gradient generator lets you visually build linear-gradient, radial-gradient, and conic-gradient backgrounds without writing the CSS by hand. Drag color stops on a bar, adjust angles and positions, and copy the ready-to-use CSS code into your stylesheet.
Supported Gradient Types
- Linear: Colors transition along a straight line at a configurable angle (0-360 degrees).
- Radial: Colors radiate outward from a center point in a circle or ellipse.
- Conic: Colors sweep around a center point like a color wheel, starting from a configurable angle.
Key Features
- Draggable Color Stops: Click and drag stops on the gradient bar to fine-tune positions.
- Repeating Mode: Toggle repeating gradients and set the pattern size for stripes, rings, and pinwheels.
- Live Preview: See your gradient rendered in real time on rectangle, circle, and text overlay shapes.
- Presets: Start from 12 curated gradients like Sunset, Ocean, Aurora, and more.
- Random Generation: Generate random gradients for quick inspiration.
How to use the CSS Gradient Generator
- Choose a gradient type: linear, radial, or conic.
- Add or remove color stops and drag them to set positions.
- Adjust the angle, position, or shape depending on the gradient type.
- Toggle repeating mode if you want a striped pattern.
- Copy the generated CSS with one click.
Frequently Asked Questions
How do I make a striped background with a repeating gradient?
Turn on Repeating gradient and lower the pattern size. The color stops are scaled into that range, so two stops at 0% and 100% with a 10% pattern size become 0% and 10% and the browser repeats the band ten times. Set the angle to 45deg for diagonal stripes, or use the radial type for concentric rings and the conic type for a pinwheel.
Why does my repeating gradient look the same as the normal one?
A repeating gradient only repeats when the last stop ends before 100%. If the stops span the whole box there is nothing left to repeat. This generator handles it for you: with repeating on, the positions are scaled into the pattern size you choose, so the pattern always tiles.
What is the difference between linear, radial and conic gradients?
A linear gradient changes color along a straight line at an angle you choose. A radial gradient starts at a point and spreads outward in a circle or ellipse. A conic gradient sweeps the colors around a center point, like a pie chart or color wheel, starting from an angle you set.
How do I add a color stop at an exact position?
Click anywhere on the gradient bar to add a stop there, or press Add Stop and then drag the handle or move the slider in the stop card. Each stop card also has a text field for the hex color, so you can paste exact brand colors.
Can I use the generated CSS as a text or border gradient?
Yes. The output is a plain background value. For text, apply it as background on the element and add background-clip: text with a transparent color. For a gradient border, use it as border-image with a slice of 1, or put it on a wrapper behind an inner element with a solid background.
Related
Free forever, no ads, no tracking. Support the project