← All Color Tools
🌅
Gradient Generator
CSS linear and radial gradients
🎨 Gradient Generator
🌅 Gradient Settings
Direction90°
✨ Preview
CSS
background: linear-gradient(90deg, #FF5733, #3B82F6);
Tailwind (linear)
bg-gradient-to-r from-[#FF5733] to-[#3B82F6]
❓ Frequently Asked Questions
Common questions about Gradient Generator
How gradient generator works?▼
Add 2+ colors with stops. Choose direction (linear/radial). Get CSS code instantly. Live preview.
Free gradient tool?▼
Yes, 100% free. Linear, radial, conic gradients. Multiple color stops. Export CSS, Tailwind, SVG.
Gradient types?▼
Linear (straight line). Radial (circle/ellipse). Conic (around point). Each has different use cases.
Linear gradient CSS?▼
background: linear-gradient(45deg, #ff5733, #c70039). Direction in degrees, top/bottom/left/right.
Radial gradient?▼
background: radial-gradient(circle, #ff5733, #c70039). Spreads from center outward. Good for spotlights.
Tailwind gradients?▼
bg-gradient-to-r from-pink-500 to-orange-500. Predefined directions. Add via and to colors for 3-color gradients.
Multiple color stops?▼
linear-gradient(to right, red 0%, yellow 50%, blue 100%). Each color at specific position. Smooth transitions.
Conic gradient?▼
Newer CSS. Rotates around point. Used for pie charts, color wheels. Browser support modern only.
Best practices?▼
2-3 colors usually enough. Subtle gradients more professional. Bold gradients for hero sections, CTAs.
Performance?▼
CSS gradients lightweight. No image needed. Rendered by browser. Smooth transitions on animation.