Loading tools
Loading tools
Loading tool
Create beautiful CSS gradients with a visual editor.
background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
A CSS gradient generator builds the CSS code for color transitions you see on modern landing pages -sunset hero backgrounds, neon button gradients, rainbow conic wheels. This one supports linear, radial, and conic gradient types with live preview, exports CSS or Tailwind arbitrary classes, and includes an animated keyframes variant.
Most generators stop at linear with 2 stops. We ship all three types, multi-stop, 10 trendy presets (Sunset, Ocean, Cyber, Mojito, Rainbow, etc.), and animation-ready output.
Yes. Unlimited use, no signup, no daily cap. Generation runs in your browser. CSSGradient.io is free but ad-supported and limited to linear gradients on the free tier; we ship linear, radial, and conic + animations free.
Three: linear (most common), radial (circle/ellipse from a center point), conic (sweep around a center, used for color wheels and rainbow effects). Toggle between them; the angle and shape controls adapt.
Yes. The Tailwind tab shows the gradient as a bg-[arbitrary-value] class you can paste straight into JSX. Underscores replace spaces per Tailwind's arbitrary value syntax.
Optionally. The Animated tab shows a CSS @keyframes rule that shifts the gradient. For linear: background-position animation. For radial/conic: transform: rotate animation. Drop into your CSS and apply the class.
All modern browsers (Chrome, Firefox, Safari, Edge from 2020+). Conic gradients have the newest support -work in Safari 14+, all current evergreen browsers. No -webkit- prefix needed for current syntax.
Yes. Click 'Add stop' for multi-color gradients. Each stop has a color and a 0-100% position. Useful for rainbow, sunset, or brand-color sequences.
Set stops at the percentage breakpoints you want. Conic from 0deg with stops at [Red 0%, Red 25%, Blue 25%, Blue 50%, ...] creates a 4-slice pie. Each color block fills its angular range.
0deg = bottom to top. 90deg = left to right. 180deg = top to bottom. 135deg (default) = top-left to bottom-right (the most-used diagonal). Drag the angle slider to rotate.
Yes. Everything runs in your browser. Your colors, positions, animation choices stay on your laptop. No log, no telemetry.
Not yet, but the 10 built-in presets cover the most common cases. To save a custom gradient long-term, copy the CSS output and paste into your stylesheet as a named class.
3 types, 10 presets, Tailwind + animation. Free unlimited.
Open the generatorThe CSS Gradient Generator page is built, reviewed, and maintained by the Molixa team. We use the tool we ship and update the docs when the behavior changes.