CSS Gradient Maker
Build linear, radial, and conic gradients visually. Copy the CSS instantly.
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
background-image: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
Quick Presets
Free CSS gradient generator: linear, radial, and conic with live preview
CSS gradients have replaced countless decorative background images on the modern web. They are resolution-independent, lightweight, and endlessly customizable: but writing multi-stop gradient syntax by hand is tedious, and the color relationships are hard to reason about without a visual. AlteredIdea's gradient maker gives you a live full-width preview that updates instantly as you adjust colors, positions, and angles.
The tool supports all three CSS gradient types. Linear gradients are the most common: use them for hero backgrounds, card surfaces, and button fills. Radial gradients work beautifully for spotlight effects and vignettes. Conic gradients are ideal for pie charts, color wheels, and angular progress indicators. In every case, you get two CSS declarations: the background shorthand and the background-image variant, so you can use whichever suits your stylesheet.
How to use: step by step
- 1Choose a gradient type
Select Linear, Radial, or Conic. Linear is the most common: great for hero backgrounds and cards. Radial creates spotlight or vignette effects. Conic creates pie-chart and color wheel effects. - 2Set the angle or direction
For linear gradients, drag the angle slider or click a direction arrow preset (→ ↓ ↙ etc.). For conic gradients, set the starting angle. Radial gradients let you pick ellipse/circle shape and size. - 3Add and adjust color stops
Each color stop has a color swatch and a position slider (0–100%). Click + Add stop to insert a new stop in the middle of the gradient. Drag positions to fine-tune transitions. - 4Use a quick preset
Click any of the six preset buttons (Sunset, Ocean, Forest, Fire, Night, Candy) to load a pre-built multi-stop gradient as a starting point for your own design. - 5Copy the CSS
Click Copy in the Generated CSS panel to grab the background shorthand declaration. The 'Also as background-image' panel gives you the background-image variant if needed.
Related Tools
Box Shadow Maker
Compose multi-layer box shadows with X/Y offset, blur, spread, color, and inset controls.
Color Palette Generator
Generate complementary, analogous, triadic, and other harmony palettes. Export as CSS vars, SCSS, or JSON.
CSS Grid Generator
Configure grid-template-columns, rows, gaps, and alignment visually. Copy ready-to-use CSS.
PX → REM Converter
Convert px to rem/em and back. Set custom base font size. Batch convert and view standard scale.
Frequently Asked Questions
- What is a CSS gradient?
- A CSS gradient is a smooth transition between two or more colors, rendered entirely by the browser without needing an image file. CSS supports linear-gradient(), radial-gradient(), and conic-gradient() functions, which can be used as values for background or background-image.
- What is the difference between linear, radial, and conic gradients?
- Linear gradients transition along a straight line at a given angle. Radial gradients emanate outward from a center point in an ellipse or circle shape. Conic gradients sweep around a center point like the hands of a clock, creating pie-chart and color wheel effects.
- How do I add more than two colors to a gradient?
- Click the + Add stop button to insert a new color stop between existing ones. Each stop has an independent color and position. You can add as many stops as you need for complex multi-color transitions.
- What does the color stop position mean?
- The position (0–100%) determines where a color stop sits along the gradient axis. Position 0 is the start, 100 is the end. Placing two stops close together creates a sharp transition; moving them farther apart creates a gradual blend.
- Can I use this gradient as a CSS background image in a div?
- Yes. Use the 'Also as background-image' output and set it on your element as background-image: <the-gradient-value>. The background shorthand in the main output sets both background-color and background-image simultaneously.
- How do I create a diagonal gradient?
- Set the gradient type to Linear and adjust the angle to 45° (top-left to bottom-right) or 135° (top-right to bottom-left). The direction arrow presets for ↘ and ↙ are equivalent shortcuts.
- Are CSS gradients supported in all browsers?
- Yes. linear-gradient and radial-gradient have full browser support including all modern versions of Chrome, Firefox, Safari, and Edge. conic-gradient has broad support since 2021 and covers all current browsers.
- What is the Sunset preset?
- The Sunset preset loads a three-stop gradient: orange (#f97316) at 0%, pink (#ec4899) at 50%, and purple (#8b5cf6) at 100%), which mimics a vivid sunset sky. Use it as a starting point and adjust the stop positions and colors to taste.
- Can I create a transparent gradient overlay?
- Yes. Edit a color stop's hex value to a color with transparency by switching to a hex with alpha, or modify the generated CSS manually to use rgba() values. Transparent-to-color gradients are common for image overlays.
AlteredIdea vs alternatives
vs CSS Gradient.io / similar tools: Most tools only support two-color linear gradients. AlteredIdea handles unlimited color stops and all three gradient types (linear, radial, conic) in one interface.
vs Figma / design tools: Figma exports gradients in its own format that requires manual conversion to CSS. AlteredIdea outputs the exact CSS declaration: no account, no conversion step, just copy-paste.
vs writing CSS manually: Guessing angle values and hex color combinations without a live preview leads to constant browser reloads. The visual preview here eliminates that cycle entirely.