CSS Gradient Generator
The CSS gradient generator builds linear and radial CSS gradients with a live preview. Set your gradient direction, add up to three color stops, and adjust angle or position with slider controls. The tool writes the complete background CSS declaration for you. One-click export produces valid CSS or Tailwind JIT class names ready to paste into your project.
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);
Linear gradient CSS syntax explained
A linear gradient CSS declaration follows the pattern background: linear-gradient(angle, color-stop-1, color-stop-2). The angle value controls direction: 0deg is bottom to top, 90deg is left to right, 180deg is top to bottom, and 270deg is right to left. You can also use directional keywords like to right or to bottom left as an alternative to degree values.
Each color stop in a linear gradient background css can include a position percentage to control exactly where the transition begins or ends. Adding a third color stop in the middle creates a more complex transition, for example, from a dark primary to a lighter midpoint, then back to a dark secondary. The generator handles position calculations automatically when you add a via color.
How to export gradients for Tailwind CSS
After configuring your gradient, click the Tailwind export button to get from-, via-, and to- color utility classes along with a bg-gradient-to-direction class. Apply all four classes directly to your element in JSX or HTML. Tailwind supports all eight gradient directions as utility classes.
For custom angles not covered by Tailwind directional utilities, use the tailwind gradient generator square-bracket syntax: bg-[linear-gradient(135deg,#3B82F6,#8B5CF6)]. This arbitrary value approach works in Tailwind JIT mode without requiring any changes to your tailwind.config.js file.
When to use radial gradients
Radial gradients radiate outward from a center point in a circular or elliptical pattern. They work well for spotlight effects, button hover states, and backgrounds that need to draw attention toward the center of an element. The CSS syntax for a radial gradient is background: radial-gradient(shape, color-stop-1, color-stop-2).
Use a css radial gradient generator when you need soft lighting effects on cards or hero sections, when creating circular icon backgrounds, or when building depth effects that suggest a light source positioned in front of the element. Linear gradients are better for directional backgrounds and banners; radial gradients work better for focused highlights.
Frequently asked questions
A linear gradient uses the format background: linear-gradient(angle, color1, color2). The angle can be a degree value such as 135deg or a direction keyword such as to right. You can add additional color stops after the first two with optional percentage positions to control exactly where each transition occurs.
Export the gradient from the tool using the Tailwind JIT option to get the from-, via-, and to- class names for your colors along with the bg-gradient-to-direction class. Apply these classes directly to your element. Tailwind's gradient utilities support all angle directions and custom values using square-bracket syntax.
Yes. The gradient generator supports three color stops. After setting your direction and first two colors, add a third stop using the mid-color control. Each stop supports its own color and position percentage. Multiple stops let you create more complex transitions such as a dark-to-light-to-dark band across an element.
A linear gradient transitions colors along a straight line at a specified angle, from one edge of the element to the other. A radial gradient radiates outward from a center point in a circular or elliptical pattern. Linear gradients work well for backgrounds and banners while radial gradients suit spotlight or highlight effects.