CSS Gradient Generator
Linear ยท Radial ยท Conic ยท Tailwind ยท Animated ยท Export PNG
background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%,...<div class="bg-gradient-to-br from-[#6366f1] via-[#a855f7] t...--gradient-primary: linear-gradient(135deg, #6366f1 0%, #a85....animated-gradient {
background: linear-gradient(135deg, #...Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors. CSS supports linear-gradient (straight line), radial-gradient (circular), and conic-gradient (around a center point). They are created using CSS without images.
What is the difference between linear, radial and conic gradients?
Linear gradients transition along a straight line at a given angle. Radial gradients emanate from a center point outward in a circle or ellipse. Conic gradients rotate around a center point like a color wheel.
How do I add opacity to a gradient color stop?
Set the opacity slider below 100% for any color stop. The tool automatically converts the hex color to rgba() with the specified opacity. Example: rgba(99,102,241,0.5) for 50% opacity indigo.
How do I use a CSS gradient in Tailwind?
Tailwind supports linear gradients with bg-gradient-to-r/l/t/b combined with from-[color], via-[color], and to-[color] classes. For radial or conic gradients, use arbitrary values: [background:radial-gradient(...)].
What is a CSS custom property gradient?
A CSS variable gradient stores the gradient as --gradient-primary: linear-gradient(...). Use it with var(--gradient-primary) anywhere in your CSS for consistent gradients across your design system.