CSS Gradient Generator
Create stunning linear, radial, and conic CSS gradients with live preview and instant code output.
How to Create a CSS Gradient
This tool generates ready-to-use CSS gradient code in seconds:
- Choose a type: Linear (straight line), Radial (from a center point), or Conic (sweep around a point).
- Set the direction: Drag the angle wheel for linear/conic, or click the position grid for radial.
- Customize color stops: Click the color swatch to open the picker, edit the hex value directly, or drag the slider to reposition the stop.
- Add/remove stops: Click "+ Add Color Stop" for multi-color gradients. Remove any stop with the × button.
- Copy the CSS: Click "Copy CSS" to copy just the background property, or "Copy" on the code block for the full CSS rule.
Paste the copied CSS directly into your stylesheet. The gradient requires no image files — it renders entirely in the browser.
CSS Gradient Type Breakdown
Linear Gradient — Colors transition along a straight line. Controlled by angle (0° = bottom to top, 90° = left to right, 135° = diagonal). Syntax: linear-gradient(135deg, #a78bfa, #f472b6). Best for: hero backgrounds, buttons, cards.
Radial Gradient — Colors radiate outward from a center point in a circular or elliptical shape. Syntax: radial-gradient(circle at center, #a78bfa, #f472b6). Best for: spotlight effects, glow overlays, profile avatars.
Conic Gradient — Colors sweep around a center point like a color wheel or pie chart. Syntax: conic-gradient(from 0deg, #a78bfa, #f472b6, #a78bfa). Best for: pie charts, spinning loaders, decorative rings.
Color stops let you control exactly where each color starts and ends. A stop like #f472b6 70% means that color holds until 70% of the gradient's length, then transitions to the next color.
Pro Gradient Design Tips
- Use 3-stop gradients sparingly. Two-stop gradients are usually cleaner. Add a third stop only when you need a midpoint shift in hue.
- Avoid pure black in gradients. Replace
#000000with a very dark version of your base hue (e.g.#0f0a1e) for a richer result. - Adjacent hue shifts look natural. A gradient from violet (#a78bfa) to pink (#f472b6) stays within 60° of hue rotation — this feels harmonious. Jumping across the wheel (e.g. green to red) can look muddy.
- Diagonal gradients at 135° are the most visually dynamic for card backgrounds. 90° (left to right) is cleaner for wide banners.
- Subtle gradients convert better. For CTAs and buttons, keep the saturation and lightness shift small — enough to show depth without distraction.
- Use
background-sizewith linear gradients to create striped patterns:background-size: 10px 10px; background-repeat: repeat; - Combine gradients with backdrop-filter for glassmorphism effects: add
backdrop-filter: blur(12px)and use a semi-transparent gradient.
A CSS gradient is a smooth visual transition between two or more colors, generated by the browser using functions like linear-gradient(), radial-gradient(), or conic-gradient(). They produce no image files and scale perfectly at any resolution.
Copy the CSS and paste it into your stylesheet. Apply it to any element using the background or background-image property. Works on divs, buttons, headers, body — any element that supports backgrounds.
Yes. Click "+ Add Color Stop" to add as many stops as you need. Each stop has an independent color and position. CSS supports any number of stops — though 2-4 is typical for clean designs.
Manually edit the CSS to use rgba() values instead of hex. For example: linear-gradient(135deg, rgba(167,139,250,1), rgba(167,139,250,0)) fades from solid violet to fully transparent. The color picker in this tool produces hex values — transparency editing is done in your code editor.
All modern browsers support linear-gradient() and radial-gradient() with 99%+ global coverage. conic-gradient() is supported in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+) covering 96%+ of users. No prefix needed in 2026.