CSS Gradient Generator
Create beautiful CSS gradients visually. Linear, radial, and conic gradients with live preview and one-click copy.
Preview
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
Gradient Type
Direction
Colors
Preset Gradients
CSS Gradients Guide
Linear Gradient
Creates a gradient along a straight line. Perfect for backgrounds, buttons, and headers.
linear-gradient(90deg, #color1, #color2)Radial Gradient
Radiates from a central point outward. Great for spotlight effects and circular elements.
radial-gradient(circle, #color1, #color2)Conic Gradient
Color transitions rotate around a center point. Ideal for pie charts and color wheels.
conic-gradient(from 0deg, #color1, #color2)Understanding Color Stops and Direction
A gradient is defined by two things: where it goes and which colors appear along the way. Each color you add is a color stop, and the percentage beside it tells the browser where that color should land: 0% at the start, 100% at the end. Between two stops the browser blends smoothly, so placing two stops close together creates a sharp band while spreading them apart produces a soft wash. Dragging the position sliders in the Colors panel rewrites those percentages live.
For linear gradients the direction sets the axis of the blend. Keywords like to right are shorthand, but the custom-angle slider gives you full control: 0deg flows bottom to top, 90deg flows left to right, and the angle continues clockwise from there. Radial gradients ignore angle entirely and instead radiate from a chosen position outward as a circle or ellipse, while conic gradients sweep the colors around a center point like the hand of a clock, the reason they work so well for pie charts and hue wheels.
Practical Uses
Gradients turn up everywhere in modern interfaces: subtle two-tone backgrounds for hero sections, depth on buttons and cards, colored overlays laid over photos to keep white text legible, skeleton loading shimmers built by animating a gradient's position, and decorative mesh effects made by layering several radial gradients. Because the generator outputs a single background value, you can paste it straight into a stylesheet, a Tailwind arbitrary value, or an inline style with no extra dependencies. All of the code here is assembled in your browser as you adjust the controls.
Frequently Asked Questions
Do CSS gradients work in all browsers?
Yes! CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers, consider adding a solid color fallback.
Can I use gradients on text?
Yes! Use background-clip: text and -webkit-background-clip: text with color: transparent to create gradient text effects.
How many colors can I use in a gradient?
There's no technical limit to the number of color stops. However, 2-5 colors typically produce the best visual results. Too many colors can look muddy.
Can I animate CSS gradients?
Gradients themselves can't be directly animated, but you can animate the background-position or background-size properties to create animated gradient effects.
What's the difference between a direction keyword and a custom angle?
Keywords such as to right or to bottom right point the gradient at an edge or corner and adapt to the element's shape. A custom angle in degrees is absolute (0deg points up and values increase clockwise), which gives finer control when you need a specific diagonal.
Can I layer multiple gradients on one element?
Yes. The background property accepts a comma-separated list of gradients, and semi-transparent colors let the lower layers show through. Stacking a few radial gradients this way is the usual trick for creating soft "mesh gradient" backgrounds.
More developer tools