CSS Gradient Generator
Create linear, radial, and conic CSS gradients for backgrounds and text.
Click bar to add · Drag handles to move
.element { background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); }
Frequently Asked Questions
What is the CSS linear-gradient syntax?
The basic syntax is: background: linear-gradient(angle, color1 stop1, color2 stop2, ...); — for example: background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); The angle can be in degrees (deg) or keywords like to right, to bottom left.
How do I create a multi-color gradient with multiple stops?
Add as many color stops as you need inside the gradient function: linear-gradient(90deg, #f97316 0%, #ec4899 33%, #8b5cf6 66%, #3b82f6 100%). Each stop is a color followed by a position (% or px).
Can I use CSS gradients in Tailwind CSS?
Yes. Tailwind CSS supports gradients with bg-gradient-to-r, from-color, via-color, and to-color utilities. For more complex gradients with multiple stops or exact angles, use the CSS output from this generator in a style attribute or a custom Tailwind plugin.
What is the difference between linear-gradient and radial-gradient?
linear-gradient creates a color transition along a straight line (top-to-bottom, left-to-right, or any angle). radial-gradient creates a circular or elliptical color transition from a central point outward.
How do I animate a CSS gradient?
CSS cannot directly animate gradient values, but you can animate background-position on a larger background-size. Set background-size: 200% 200%, then animate background-position with @keyframes to create a smooth moving gradient effect.