CSS Gradient Generator
Create linear, radial, and conic CSS gradients with a visual editor. Add multiple color stops, adjust angles and positions, and copy the ready-to-use CSS code.
background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);bg-gradient-to-l from-[#7c3aed] to-[#2563eb]Presets
Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
Linear gradients transition along a straight line (e.g., left to right). Radial gradients radiate from a center point outward. Conic gradients rotate around a center point (like a pie chart). All are native CSS and supported in all modern browsers.
How do I control gradient direction?
For linear gradients, the angle determines direction (0deg = bottom to top, 90deg = left to right, 135deg = top-left to bottom-right). You can also use keywords: to right, to bottom, to top left. For conic, angle sets the starting rotation.
Can I use this gradient in Tailwind CSS?
For 2-color linear gradients, a Tailwind equivalent is generated automatically. For more complex gradients, use the full CSS value via arbitrary values: bg-[linear-gradient(135deg,#7c3aed,#2563eb)] or add it to your globals.css.