CSS Gradient Generator
Create beautiful CSS gradients with a visual editor. Linear, radial, and conic. Copy CSS in one click.
About this tool
A CSS gradient is a smooth transition between two or more colors, rendered by the browser as a background image. There are three kinds: linear (colors flow along a straight line at an angle), radial (colors radiate outward from a center point), and conic (colors sweep around a circle like a pie chart). This generator produces all three with a live preview and color-stop editor.
Example output: background: linear-gradient(135deg, #5b8cff 0%, #7c5cff 100%);. Add more color stops by clicking "+ Add color stop" and drag each stop's position slider to control where that color sits in the transition. The angle slider (0–360°) applies to linear and conic gradients.
Click any preset to load a ready-made combination, then adjust the colors or angle. Random generates a fresh 2–4 stop gradient with complementary HSL-tuned hues. Reverse flips the stop order; Even redistributes stops at equal spacing. Copy the final CSS, or grab a shareable link to send the exact gradient to someone else.
FAQ
What is the difference between linear, radial, and conic gradients? ›
Linear gradients transition colors along a straight line at a chosen angle. Radial gradients radiate from a center point outward in circles. Conic gradients sweep colors around a central point like slices of a pie, which is useful for color wheels and charts.
How many color stops can I add? ›
There is no hard limit — add as many as you need. Most gradients use 2–4 stops. Each stop has a position (0–100%) that controls where its color appears in the transition. Stops are sorted by position automatically when the CSS is generated.
Why does the angle only affect linear and conic gradients? ›
Radial gradients radiate from a center point, so an angle does not apply. The angle slider is hidden when radial is selected. For conic gradients the slider sets the starting angle of the sweep.
How does the share link work? ›
The current gradient (type, angle, every stop color and position) is encoded into the URL. Click "Share link" to copy the full URL — opening it restores the exact gradient on any device.
Can I use the gradient on text or borders? ›
Yes — set the gradient as a background, then use background-clip: text with transparent fill to gradient-paint text, or use border-image for gradient borders. The copied CSS uses the standard background property which works everywhere.
How is this different from CSS filters like blur or brightness? ›
Gradients create smooth color transitions (background layers), while <a href="/css-filter" class="text-accent hover:underline">CSS filters</a> alter the rendering of an entire element — blur, brightness, contrast, and color shifts. They serve different visual purposes: gradients add decorative backgrounds, filters stylize existing content. You can also combine them: add a gradient background to a container, then apply a filter to the image inside it.