CSS Gradient Generator
Build linear, radial, and conic gradients visually — drag color stops, tweak angles, and copy production CSS in one click.
Gradient Type
Angle
Color Stops
Preview
CSS Output
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Presets
About this tool
A visual CSS gradient builder that supports all three gradient types: linear (straight-line blends at any angle), radial (circular or elliptical blends from a center point), and conic (color wheel blends). Add up to 6 color stops, adjust positions with sliders, and pick from 8 curated presets. Output in standard CSS, vendor-prefixed CSS, or Tailwind JSX format.
How to use it
Quick steps to get the most out of this utility.
- 1
Pick a gradient type
Choose linear, radial, or conic from the type selector.
- 2
Set the direction
Use the angle slider (linear/conic) or shape toggle (radial) to control the gradient direction.
- 3
Customize color stops
Click the color pickers to change colors, drag the position sliders to adjust placement, and add stops with the + button.
- 4
Copy the CSS
Switch between CSS, Full (with vendor prefixes), or Tailwind format, then click Copy.
CSS gradient syntax
The three gradient functions in CSS are: linear-gradient(), radial-gradient(), and conic-gradient(). Each accepts a direction (angle or shape) followed by a comma-separated list of color stops with optional position percentages.
For example, linear-gradient(135deg, #6366f1 0%, #ec4899 100%) creates a purple-to-pink blend from the top-left corner to the bottom-right. The position percentages tell the browser where each color should be fully saturated.
When to use each gradient type
- Linear: The workhorse — use it for hero backgrounds, card overlays, buttons, and most UI elements. The 135° angle is the most common direction (top-left to bottom-right).
- Radial: Use for spotlight effects, vignettes, glowing orbs, or any design where color radiates from a center point. Change between circle and ellipse depending on whether the element is square or rectangular.
- Conic: Use for pie charts, color wheels, gauge indicators, and rotational visual effects. Not supported in older browsers (requires Safari 12.1+, Chrome 69+).
Color stop positioning tips
- Two stops = clean blend: Position at 0% and 100% for a smooth, even transition. This is the most common gradient.
- Hard lines: Place two stops at the same position (e.g., 0% blue at 50% and 0% green at 50%) to create a sharp boundary with no transition.
- Three stops = depth: Add a middle color (e.g., blue at 0%, purple at 50%, pink at 100%) for more visual richness without being garish.
- Uneven spacing: Moving stops closer together compresses the transition; spacing them further apart stretches it.
Frequently asked questions
What is the difference between linear, radial, and conic gradients?+
A linear gradient transitions colors along a straight line at a specified angle. A radial gradient transitions from a center point outward in a circle or ellipse. A conic gradient transitions colors around a center point like a color wheel — useful for pie charts and color dials.
How do I set the angle for a linear gradient?+
The angle determines the direction of the gradient line. 0° goes up, 90° goes right, 180° goes down, and 270° goes left. Use the slider or type a value — common angles are 135° (top-left to bottom-right) and 180° (top to bottom).
Can I copy the CSS with vendor prefixes?+
Yes — switch to "Full" output mode to get the standard, -webkit-, and -moz- prefixed versions all together. The "CSS" mode gives just the standard property for modern browsers. The "Tailwind" mode shows the JSX style attribute format.
How many color stops can I add?+
You can add up to 6 color stops. Two is the minimum, which creates a simple two-color blend. Adding stops at different positions lets you create multi-tone gradients, sharp transitions, or banded effects.
What is a conic gradient used for?+
Conic gradients are used for pie charts, color wheels, hue dials, and gauge indicators. They rotate colors around a center point, which makes them ideal for any UI element that represents proportions or rotational data.
How do I use the gradient in Tailwind CSS?+
Tailwind does not have built-in gradient utilities for arbitrary multi-stop gradients. Use the "Tailwind" output mode to get a JSX style attribute you can paste directly into your component. For simple two-color gradients, you can use Tailwind's bg-gradient-to-* utilities with from-* and to-* classes.
Keep exploring
More utilities and reading from Toolisk.