Linear, Radial & Conic Gradients
All three major CSS gradient types in one tool. Adjust the angle with a visual wheel, set ellipse or circle shape for radial gradients, and switch between types without losing your color setup.
Create stunning linear, radial, conic and animated gradients in seconds. Copy clean CSS, Tailwind or React code instantly — no account, no limits.
No learning curve. No account. From idea to production-ready code in under 30 seconds.
Select between linear, radial or conic gradient. Switch anytime with one click — your colors are always preserved.
Add unlimited color stops. Drag to reorder, fine-tune position and opacity per stop. Rotate the angle with the interactive wheel or pick from 12 built-in presets.
Hit Copy. Get clean CSS, Tailwind, React inline style, CSS variable, text gradient or animated keyframe code — instantly. No watermarks, no limits.
Built for designers and developers who want clean gradient code — fast.
All three major CSS gradient types in one tool. Adjust the angle with a visual wheel, set ellipse or circle shape for radial gradients, and switch between types without losing your color setup.
Generate a fully animated CSS gradient with live preview. The tool
produces a complete @keyframes
animation you paste directly into your stylesheet — no JavaScript needed.
Apply your gradient to text, choose from system fonts or 10+ Google Fonts,
adjust size and weight — then export as a transparent PNG or copy the
background-clip: text CSS code.
See your gradient applied to a realistic UI card — hero image, button and layout. Instantly understand how it looks in a real design context before copying the code.
CSS, Tailwind inline style, CSS variable
(:root { --gradient }),
plain value, text gradient and animated keyframe CSS — all with one-click copy.
Every gradient gets a unique shareable URL. Send it to a colleague or client — they open the link and see the exact same gradient, ready to edit or use.
Your last 10 gradients are automatically saved in your browser. No account needed — scroll back through recent work and pick up exactly where you left off.
Save your best gradients with a custom name. Build your own personal library — all stored locally in your browser, private and instant.
Download any gradient as a high-resolution PNG — perfect for presentations, Figma mockups, social media or wallpapers. No watermark, no sign-up, one click.
Stuck on inspiration? Hit Random to instantly generate a beautiful gradient combination you might never have thought of yourself.
Automatically follows your system preference. Switch manually to dark, light or system mode anytime — preference is saved in your browser.
Works on desktop, tablet and mobile. Optimized touch targets, scrollable tabs and a stacked layout for small screens — no installation, no app store needed.
No matter what stack you use — plain CSS, Tailwind, React or preprocessors — cssgradients.app generates the exact syntax you need. Copy once, paste anywhere.
/* Standard CSS */ background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); /* CSS Variable */ :root { --brand-gradient: linear-gradient( 135deg, #6366f1, #ec4899); } /* Text Gradient */ background: linear-gradient(135deg, #6366f1, #ec4899); background-clip: text; -webkit-text-fill-color: transparent; /* Animated @keyframes */ background-size: 300% 300%; animation: gradientShift 4s ease infinite;
Everything you need to know about CSS gradients and this tool.
background: linear-gradient(angle, color1, color2).
For example: background: linear-gradient(135deg, #6366f1, #ec4899).
With cssgradients.app you pick colors visually, adjust the angle with
a wheel, and copy the generated code instantly — no manual coding required.
:root { --gradient: ... }),
text gradients with background-clip: text,
and full animated CSS keyframe code.
@keyframes
combined with background-size: 300% 300%
and background-position animation to create
a smooth looping color flow — entirely in CSS, no JavaScript needed.
cssgradients.app generates the complete production-ready animation code automatically.