CSS Gradient Generator
Create linear, radial, and conic CSS gradients visually. Control color stops, angles, and positions. Export as CSS or Tailwind classes.
#3b82f6#8b5cf6background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
Presets
Frequently Asked Questions
What is a CSS linear gradient?
A CSS linear gradient creates a smooth color transition along a straight line. You define a direction (as an angle or keyword like 'to right') and two or more color stops. The browser interpolates between the colors. Example: background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%). Linear gradients are the most commonly used type for backgrounds, buttons, and decorative elements.
When should I use radial vs linear gradients?
Use linear gradients when you want a directional transition — great for backgrounds, hero sections, and buttons. Use radial gradients when you want a centered glow or spotlight effect — the colors radiate outward from a point. Conic gradients are useful for pie charts, color wheels, and angular transitions. The CSS conic-gradient() function draws color transitions around a center point.
What are gradient color stops?
Color stops define where along the gradient each color appears. A stop has a color and a position (0%–100%). If you only specify two stops at 0% and 100%, the transition is even across the full gradient. Adding intermediate stops with different positions creates accelerating or decelerating transitions. You can also use hard stops (two stops at the same position) to create sharp color lines without blending.
How do I use gradients in Tailwind CSS?
Tailwind v3 has built-in gradient utilities: bg-gradient-to-r (direction), from-blue-500 (start color), via-purple-500 (optional midpoint), to-pink-500 (end color). For arbitrary colors, use from-[#3b82f6]. The gradient direction classes are: to-r, to-l, to-t, to-b, to-tr, to-tl, to-br, to-bl. This generator shows you the equivalent Tailwind classes when the gradient is compatible.
Can I use gradients on text?
Yes — to apply a gradient to text, set the gradient as a background, then use background-clip: text and color: transparent (or -webkit-text-fill-color: transparent). In Tailwind: bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent. This is a popular technique for hero headings and badges.