About CSS Gradient Generator
Create beautiful CSS gradients. Linear, radial, conic with color presets. Copy code. Free, no sign-up required.
How to use
- Pick a gradient Type from the dropdown: Linear (color travels along a straight line at the chosen angle), Radial (color radiates outward from the center in a circle), or Conic (color sweeps around the center like a clock face). Each emits different CSS function syntax.
- Drag the Direction / Angle slider (0 to 360 degrees) to rotate linear gradients or set the conic starting angle. 0deg points straight up (top), 90deg points right, 180deg points down, 270deg points left. For radial, the angle has no effect — distribution is symmetric.
- Set Color 1 and Color 2 with the color pickers — these are the start and end stops. Click the Color 3 picker and tick the 'Use 3rd color' checkbox to add a middle stop, which lets you create rainbow effects, sunset blends, or asymmetric transitions.
- Click any preset swatch in the bottom row to load a curated combination (purple-violet, magenta-coral, cyan-aqua, mint-teal, sunset, lavender, midnight, brand amber). The preset overwrites Color 1 and Color 2 — useful starting points for tuning.
- The CSS Code field below the preview shows the live linear-gradient(), radial-gradient(), or conic-gradient() string. Click the clipboard button to copy directly into your stylesheet, Tailwind config, or design token JSON.
- For more sophisticated gradients (eased curves, multiple positioned stops, mesh gradients), copy the base output and add intermediate color stops by hand: linear-gradient(135deg, #f8bd44 0%, #f8a044 30%, #e74c3c 100%). The tool generates the simple form; advanced editing is a two-line text edit away.
Examples
135-degree two-color linear
Type linear, angle 135, c1 #667eea, c2 #764ba2. Output: linear-gradient(135deg, #667eea, #764ba2). The 135deg points down-and-right, so the lighter purple sits in the upper-left and the darker violet pools in the lower-right — a classic Stripe-style hero background.
Radial sunset with 3 stops
Type radial, c1 #fa709a (rose), c2 #fee140 (gold), enable Color 3 #ff6b6b (coral). Output: radial-gradient(circle, #fa709a, #ff6b6b, #fee140). Color radiates from rose at center, through coral, to gold at the outer edge — sun-on-horizon effect.
Conic color wheel
Type conic, angle 0. Output: conic-gradient(from 0deg, #f8bd44, #e74c3c). The two colors sweep around the center as a complete circle, so the start and end meet at 0deg/360deg — useful for loading spinners, circular progress, or pie-chart-like backgrounds.
Frequently asked questions
What is the difference between angle keywords and degree values?
linear-gradient(to bottom, ...) and linear-gradient(180deg, ...) are equivalent — both point downward. Keywords like 'to top right' compute an angle that exactly hits the corner of the element regardless of aspect ratio, while a fixed 45deg always points diagonally regardless of box shape, so a 45deg gradient on a wide rectangle ends nowhere near the corner. Use keywords for corner-anchored gradients and degrees for fixed visual angles. The tool emits degrees for explicit control.
How do I fake an eased gradient curve?
CSS gradients linearly interpolate by default — a two-color linear from black to white passes through grey at 50 percent. The eye perceives this as banded because human luminance perception is non-linear. To fake easing, add multiple color stops with non-uniform spacing: linear-gradient(black, #1a1a1a 25%, #4a4a4a 50%, #9a9a9a 75%, white). Many designers use 5-7 stops following a quadratic or cubic curve. CSS Color Level 4's color-interpolation-mode helps too — use 'in oklab' for perceptually uniform blends.
Why do my gradients look banded on dark backgrounds?
8-bit color quantization. With only 256 levels per channel, a long subtle gradient (like dark-grey to slightly-lighter-grey across 800 pixels) requires more steps than the bit depth provides, producing visible bands. Solutions: (1) add intentional noise/grain via background-blend-mode and a noise PNG; (2) use shorter gradients; (3) use higher contrast end stops; (4) on capable browsers, use 10-bit color via @media (color-gamut: p3) and the color() function.
What browser support do conic gradients have?
Excellent — Chrome/Edge 69+, Safari 12.1+, Firefox 83+ (so basically all browsers since 2020). For IE11 or pre-2020 mobile browsers, conic gradients fall back to background-color. There is no easy polyfill; if you must support older browsers, render a PNG/SVG approximation. CSS Houdini paint worklets used to be a polyfill route but were never widely shipped.
Can I animate a CSS gradient?
Not directly — CSS transitions and animations cannot tween between gradient declarations because gradients are rendered as images, not interpolatable values. Workarounds: (1) animate background-position on a 200%-wide gradient to create a moving sweep; (2) use background-size with multiple gradient layers and animate size; (3) animate a CSS custom property (--gradient-angle) and reference it in the gradient string — only Houdini-aware browsers will tween smoothly. For complex animated gradients, use canvas or WebGL.
How do I make a gradient that respects dark mode?
Define gradient stops as CSS custom properties and override them in @media (prefers-color-scheme: dark) or via a html[data-theme='dark'] selector. Example: --grad-start: #f8bd44; --grad-end: #e74c3c; in :root, then darker variants in your dark mode block. The gradient declaration stays the same — background: linear-gradient(135deg, var(--grad-start), var(--grad-end)).
What is the conic-gradient 'from' angle for?
It sets where the 0 percent stop begins on the circle. from 0deg starts at 12 o'clock (top), from 90deg starts at 3 o'clock (right), and so on. Without 'from', the default is 0deg/top. For pie-chart-style fills, use hard color stops with percentages: conic-gradient(red 0% 25%, blue 25% 60%, green 60% 100%) renders three distinct wedges — extremely useful for chart backgrounds without an SVG.
Part of ToolFluency’s library of free online tools for Developer Tools. No account needed, no data leaves your device.