Interactive Real India Map Studio 2026

Free CSS Gradient Generator 2026 - Linear Radial Conic with 30+ Beautiful Presets

Professional CSS Gradient Generator tool — Linear, Radial aur Conic gradients design karein, color stops add karein, angle control karein, aur ek click mein copy-ready CSS code paayen. 30+ beautiful presets bhi included!

🌈

CSS Gradient Generator

Linear • Radial • Conic • 30+ Presets • CSS Code Copy

🌈 Gradient Type

☉ Angle / Direction

135°

Drag dial or slide

⭘ Radial Settings

Shape Circle Ellipse

Size Farthest Corner Closest Corner Farthest Side Closest Side

Position X Center Left Right

Position Y Center Top Bottom

◔ Conic Settings

Start Angle

0°

Position X CenterLeftRight

Position Y CenterTopBottom

⇔ Repeating Size

Tile Size

50px

🌈 Color Stops

✨ 30+ Beautiful Presets — Click to Load

🔞 Text Gradient Preview

CSS Gradient

Text gradient CSS: background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;

👁 Live Preview

CSS Code

Tailwind CSS v3+ (arbitrary value)

With Vendor Prefixes

CSS Gradient Generator Kaise Use Karein?

1. Gradient Type select karein — Linear, Radial, Conic, ya Repeating
2. Angle dial drag karein ya direction buttons se angle set karein
3. Color stops mein colors pick karein aur positions set karein
4. Presets mein se koi beautiful gradient load karein
5. Copy CSS button se code copy karein aur directly use karein
6. Tailwind CSS aur vendor-prefixed code bhi available hai

📢 Share This Page