CSS Gradient Generator
Build beautiful CSS gradients visually. Choose linear, radial, or conic type, add color stops, adjust angle and position, and get a live preview. Copy the ready-to-use CSS with one click. Free, no sign-up, works offline once loaded.
Color stops
Preview
CSS
Everything runs in your browser — no data is sent anywhere.
How to Use the Gradient Generator
- Choose the gradient type — linear, radial, or conic.
- Set your colors and positions using the color pickers and stop sliders.
- Adjust the angle (linear) or shape (radial), then copy the CSS and paste it into your project.
CSS Gradients Explained
CSS gradients are a powerful tool for adding depth, visual interest, and polish to web interfaces without any image files. Because they are rendered by the browser using math rather than pixels, they are infinitely scalable, load instantly, and adapt to any screen density. A gradient hero background on a website adds visual richness with zero additional HTTP requests.
Linear gradients are the most common — they transition in a straight line. The angle controls the direction. Using multiple stops, you can create complex effects like sunrise skies, brand gradients, or subtle texture overlays. Instagram's iconic logo uses a radial gradient combined with a linear gradient over a solid orange background.
Conic gradients are the newest addition, rotating colors around a center point. They are perfect for pie charts (each segment is a color stop spanning an arc), color wheels, and starburst patterns. Because they are CSS-native, they require no JavaScript charting library for basic use cases.
Frequently Asked Questions
What is a CSS gradient? ▼
A CSS gradient is a smooth transition between two or more colors, generated entirely in CSS without any image file. Gradients are defined using the linear-gradient(), radial-gradient(), or conic-gradient() CSS functions and can be applied as backgrounds, borders, or text fills.
What is the difference between linear, radial, and conic gradients? ▼
A linear gradient transitions along a straight line at a specified angle (e.g., left to right, top to bottom). A radial gradient radiates from a central point outward in an ellipse or circle. A conic gradient rotates around a center point like a color wheel or pie chart.
How do I change the angle of a linear gradient? ▼
Use the angle input (0–360°). At 0deg the gradient goes from bottom to top; at 90deg from left to right; at 180deg from top to bottom; at 270deg from right to left. You can also type direction keywords like "to right", "to bottom right", etc., directly in your CSS.
What are color stops? ▼
Color stops define the colors and their positions in the gradient. Each stop has a color and an optional position (0%–100%). Adding stops between 0% and 100% creates a multi-color gradient. You can drag stops to reposition them or add as many as needed.
How do I make a transparent gradient? ▼
Set the opacity/alpha of any color stop to 0 by using an rgba() or hsla() color with alpha = 0, or the CSS keyword transparent. For example, a gradient from "white" to "transparent" creates a subtle fade-out effect commonly used on hero images.
What is the browser compatibility of CSS gradients? ▼
All modern browsers (Chrome, Firefox, Safari, Edge) support linear-gradient, radial-gradient, and conic-gradient without vendor prefixes. Conic-gradient has slightly newer support (Chrome 69+, Firefox 83+, Safari 12.1+). For Internet Explorer 11, only linear-gradient with the -ms- prefix was supported.
Can I use gradients as text fills? ▼
Yes, with a small CSS trick: set background to your gradient, then apply background-clip: text and -webkit-background-clip: text, and set color: transparent. The gradient will show through the text shape. This requires modern browser support and the -webkit- prefix is still needed for Chrome and Safari.
How do I create a repeating gradient? ▼
Use repeating-linear-gradient() or repeating-radial-gradient(). Define the pattern once with color stops, and the browser tiles it. For example, repeating-linear-gradient(45deg, #000 0, #000 10px, #fff 10px, #fff 20px) creates black-and-white diagonal stripes.