CSS Gradient Generator
Generate CSS gradients visually — linear, radial, and conic. Add multiple color stops with custom positions, preview in real time, and copy the CSS code for your project.
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
How to Use This Calculator
- Choose the gradient type: linear (straight line), radial (from center), or conic (around a point).
- For linear gradients, adjust the angle slider (0–360°) to control direction.
- Add or remove color stops using the buttons. Pick colors with the color picker and set positions with the range slider.
- Watch the live preview update in real time as you make changes.
- Click "Copy" to copy the CSS code and paste it into your stylesheet.
Formula
Radial: background: radial-gradient(circle, color1 position%, color2 position%, ...);
Conic: background: conic-gradient(from angle, color1 position%, color2 position%, ...);
Gradients are generated as CSS background or background-image properties. You can layer multiple gradients by stacking them, with the first listed appearing on top.
Examples
linear-gradient(135deg, #f97316, #ec4899, #8b5cf6) — warm orange to pink to purple, 135° angle.
radial-gradient(circle, #06b6d4, #1e3a5f) — cyan fading to dark blue from the center.
conic-gradient(from 0deg, red, orange, yellow, green, blue, purple, red) — a full color wheel around a center point.
Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors, defined using the background or background-image property. Unlike images, CSS gradients are generated by the browser, load instantly, and can be animated.
Linear vs radial vs conic gradients?
Linear gradients flow along a straight line at a specified angle. Radial gradients radiate outward from a center point in a circular or elliptical shape. Conic gradients rotate around a center point like a color wheel, useful for pie charts and conic effects.
How to create a gradient in CSS?
Use the background property with linear-gradient(), radial-gradient(), or conic-gradient(). Specify colors and optional position percentages. For example: background: linear-gradient(90deg, red, blue);
How to make smooth color transitions?
Add more color stops between your start and end colors, or increase the spread by adjusting position percentages. Avoid sharp jumps between contrasting colors. Using 3–5 well-chosen colors with even spacing creates the smoothest transitions.