CSS Gradient Generator
Create beautiful CSS gradients visually. Copy the code with one click.
CSS Gradient Guide
CSS gradients let you display smooth transitions between two or more colors without using image files. Since gradients are generated by the browser, they are resolution-independent and scale perfectly on any screen, including high-DPI Retina displays. They are defined using the background or background-image CSS property.
Linear Gradients
A linear-gradient() creates a color transition along a straight line. You control the direction using an angle (e.g., 135deg) or keywords like to right, to bottom left. Linear gradients are the most common type, used for backgrounds, buttons, hero sections, and decorative elements. Multiple color stops let you define exactly where each color appears along the gradient line.
Radial Gradients
A radial-gradient() radiates color outward from a center point in a circular or elliptical shape. You can control the shape (circle or ellipse), size, and position. Radial gradients are ideal for spotlight effects, glowing orbs, and vignette overlays. They bring depth and focus to UI elements that linear gradients cannot achieve.
Conic Gradients
A conic-gradient() sweeps color transitions around a center point, like a color wheel. Unlike radial gradients that radiate outward, conic gradients rotate around a fixed point. They are perfect for pie charts, progress indicators, color pickers, and angular visual effects. You set the starting angle with from and position with at.
Gradient Examples
| Preview | Name | CSS Code |
|---|---|---|
| Sunset | linear-gradient(135deg, #f97316, #ef4444, #ec4899) |
|
| Ocean | linear-gradient(135deg, #0ea5e9, #3b82f6, #1e3a5f) |
|
| Forest | linear-gradient(135deg, #22c55e, #16a34a, #064e3b) |
|
| Aurora | linear-gradient(135deg, #a855f7, var(--accent), #3b82f6) |
|
| Gold | linear-gradient(135deg, #fbbf24, #f59e0b, #d97706) |
|
| Cherry | linear-gradient(135deg, #f43f5e, #e11d48, #9f1239) |
|
| Silver | linear-gradient(135deg, #e2e8f0, #94a3b8, #475569) |
|
| Candy | linear-gradient(135deg, #fb923c, #f472b6, var(--accent-hover)) |
Frequently Asked Questions
How do I create a CSS gradient?
Use the CSS background property with a gradient function. For a linear gradient: background: linear-gradient(135deg, #667eea, #764ba2);. Define the direction (angle or keyword), followed by two or more color stops. Each color stop can include an optional position percentage. The browser smoothly interpolates between the colors you define.
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a given angle -- for example, top to bottom or diagonally. A radial gradient radiates colors outward from a center point in a circle or ellipse. Choose linear gradients for backgrounds and directional effects. Use radial gradients for spotlight effects, glowing elements, or when you need circular color transitions.
Can I use gradients as backgrounds in CSS?
Yes. Gradients are applied via the background or background-image property and work on any HTML element -- divs, buttons, headers, sections, and more. You can even layer multiple gradients using comma separation. Since gradients are rendered by the browser rather than loaded as files, they are resolution-independent and add zero HTTP requests to your page load.
How do I make a gradient transparent in CSS?
Use color values with an alpha channel. With rgba(): linear-gradient(to right, rgba(99, 102, 241, 1), rgba(99, 102, 241, 0)). You can also use the transparent keyword: linear-gradient(to right, var(--accent), transparent). Modern browsers also support 8-digit hex codes where the last two digits define opacity, e.g., var(--accent)00 for fully transparent.
What is a conic gradient and when should I use it?
A conic-gradient() sweeps colors around a center point, similar to a color wheel. It is different from radial gradients, which radiate outward. Conic gradients are useful for pie charts, donut charts, progress rings, and angular decorative effects. Example: background: conic-gradient(from 0deg, red, yellow, green, blue, red); creates a full-spectrum color wheel.