Free CSS Gradient Generator: Linear, Radial & Conic
Create beautiful CSS gradient backgrounds in seconds. Pick your colors, choose a gradient type, drag the color stops, and copy the generated CSS directly into your project — no account, no installs, completely free.
Preview
Type
Color Stops
CSS Output
How to use this CSS gradient generator
You don’t need to know any CSS to get started. The tool handles all the code for you.
01
Choose a gradient type
Radial: colors radiate outward from a center point, forming a circular or elliptical shape.
Conic: colors rotate around a center point like a color wheel. Great for pie charts and decorative effects.
02
Set the angle or position
03
Pick your colors and adjust stops
04
Copy the CSS and use it
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors, generated entirely by the browser using CSS — no image file needed. Gradients are part of the CSS <image> data type, which means you can use them anywhere a background image is accepted.
The main advantage over image-based backgrounds is performance. A CSS gradient is a few bytes of code, it scales perfectly at any resolution, and it never makes an HTTP request. That makes pages faster and gives designs a crisper look on high-density screens.
CSS defines three core gradient types: linear-gradient(), radial-gradient(), and conic-gradient(). Each has its own syntax and visual behavior, but all three follow the same pattern: you define where the gradient starts and ends, then list the colors and positions along the way.
Types of CSS gradients explained
You don’t need to know any CSS to get started. The tool handles all the code for you.
Linear gradient
A linear gradient blends colors along a straight line in a direction you control. The direction is set with a degree value – 0deg points upward, 90deg points to the right, 180deg points downward. You can also use keywords like to right, to bottom left, and so on.
Basic syntax:
background: linear-gradient(135deg, #6C63FF, #FF6584);Basic syntax:
background: linear-gradient(90deg, #6C63FF 0%, #FF6584 50%, #FFD93D 100%);Linear gradients are the most widely used type in web design. You’ll see them in hero sections, button hover states, navigation bars, and card backgrounds across almost every modern website.
Radial gradient
A radial gradient starts at a center point and spreads outward. The shape can be a perfect circle or an ellipse, and you can position the center anywhere in the element — top left, bottom right, or a custom coordinate.
Basic syntax:
background: radial-gradient(circle at center, #6C63FF, #FF6584);Ellipse with custom position:
background: radial-gradient(ellipse at top right, #6C63FF 0%, #FF6584 100%);Radial gradients work well for spotlight effects, glowing buttons, and adding depth to a flat background. They look especially good on dark-themed designs.
Conic gradient
A conic gradient sweeps colors around a center point, the same way a clock face sweeps in a circle. Unlike radial gradients that go from the center outward, conic gradients change color as you rotate around the center.
Basic syntax:
background: conic-gradient(from 0deg, #6C63FF, #FF6584, #FFD93D, #6C63FF);Conic gradients are newer than linear and radial, and browser support is excellent across all modern browsers. They are commonly used for pie charts, color wheels, and decorative circular loaders.
CSS gradient syntax: a quick reference
Here is a concise reference for the most useful gradient patterns. Copy any of these directly and customise the colors and angles for your project.
Two-color linear gradient (most common)
/* Left to right */
background: linear-gradient(to right, #667eea, #764ba2);
/* Diagonal at 45° */
background: linear-gradient(45deg, #667eea, #764ba2);
/* Top to bottom */
background: linear-gradient(to bottom, #667eea, #764ba2);Multi-stop gradient
/* Three colors, even distribution */
background: linear-gradient(90deg, #6C63FF, #FF6584, #FFD93D);
/* Three colors, custom positions */
background: linear-gradient(90deg, #6C63FF 0%, #FF6584 60%, #FFD93D 100%);
/* Hard transition (no fade between colors) */
background: linear-gradient(90deg, #6C63FF 50%, #FF6584 50%);Radial gradient patterns
/* Circle from center */
background: radial-gradient(circle, #6C63FF, #FF6584);
/* Ellipse from top */
background: radial-gradient(ellipse at top, #6C63FF, #FF6584);
/* Spotlight effect */
background: radial-gradient(circle at 30% 40%, #ffffff33, #00000099);Conic gradient patterns
/* Simple sweep */
background: conic-gradient(#6C63FF, #FF6584, #FFD93D, #6C63FF);
/* Starting from a specific angle */
background: conic-gradient(from 45deg, #6C63FF, #FF6584);
/* Pie chart (two segments) */
background: conic-gradient(#6C63FF 60%, #FF6584 0);Gradient as text color
background: linear-gradient(90deg, #6C63FF, #FF6584);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;Why use CSS gradients instead of images?
Most designers switched from background images to CSS gradients years ago. The reasons are practical:
Speed: A gradient background is a few characters of CSS. A background image — even a compressed JPEG — adds an HTTP request and kilobytes to the page. CSS gradients cost essentially zero load time.
Scalability: Gradients are resolution-independent. On a 4K screen or a device with a 3× pixel ratio, a CSS gradient stays perfectly sharp. An image-based background would require serving different resolutions or accepting visible pixelation.
Flexibility: You can change a CSS gradient with a single line edit. Colors, angles, and color stop positions are all controlled by code — meaning you can create design system tokens for your brand gradients and update them across your entire site in one place.
Core Web Vitals: Google uses page speed and rendering stability as ranking signals. CSS-generated backgrounds contribute nothing to Largest Contentful Paint (LCP) or Cumulative Layout Shift (CLS), while image backgrounds can negatively affect both.
Practical tips for better gradient design
Use at least three color stops for richness
Two-color gradients can look flat or harsh, especially between very different hues. Adding a middle stop — even one close in value to the start or end color — softens the transition and adds visual depth. Try adding a slightly lighter or more saturated version of one of your two main colors as a middle stop.
Avoid opposite hues without an intermediate stop
When two colors sit on opposite sides of the color wheel — purple and yellow, blue and orange — a direct gradient between them passes through a muddy gray zone in the middle. To avoid this, add an intermediate stop at 50% with a color that bridges the two hues more naturally, or use a tool like oklch color space if you need precise perceptual blending.
Check contrast for text on gradients
If you place text over a gradient background, the contrast ratio changes across the element. Test the contrast at the lightest end of the gradient — that is where legibility is most likely to fail. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text.
Use low-opacity gradients as overlays
You don't have to replace your background with a gradient. One of the most practical uses is layering a semi-transparent gradient over a photo to create a readable text zone. For example:
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%);This pattern is used on virtually every hero section with a background photo and text overlay.
Try gradients on borders, not just backgrounds
CSS gradients work on borders via border-image, and on text as shown in the syntax section above. These uses are less common, which makes them stand out more in designs.
border: 3px solid transparent;
border-image: linear-gradient(90deg, #6C63FF, #FF6584) 1;Browser support for CSS gradients
| Feature | Chrome | Firefox | Safari | Edge | iOS Safari |
|---|---|---|---|---|---|
| linear-gradient | 26+ | 16+ | 6.1+ | 12+ | 7.1+ |
| radial-gradient | 26+ | 16+ | 6.1+ | 12+ | 7.1+ |
| conic-gradient | 69+ | 83+ | 12.1+ | 79+ | 12.2+ |
All three gradient types work in every major browser in use today. No -webkit- prefix is needed for standard gradient syntax as of 2025. If you specifically need Internet Explorer 10–11 support, linear and radial gradients work but conic gradients do not.
Frequently Asked Questions
What is a CSS gradient generator?
A CSS gradient generator is a free online tool that lets you visually design color gradients and instantly outputs the CSS code. You control the gradient type, angle, colors, and stop positions through a visual interface — and the tool writes the correct CSS background property for you.
What is the CSS code for a gradient background?
Use the background property with a gradient function. For example: background: linear-gradient(135deg, #6C63FF, #FF6584); creates a diagonal purple-to-pink gradient. You can add more colors, adjust the angle, and position each color stop using percentage values.
What is the difference between a linear and radial gradient in CSS?
A linear gradient blends colors along a straight line, controlled by an angle or direction keyword. A radial gradient radiates colors outward from a center point in a circular or elliptical shape. Both are created with pure CSS and scale infinitely without image files.
How do I make a gradient with 3 colors in CSS?
List three (or more) colors inside the gradient function: background: linear-gradient(90deg, #red, #yellow, #blue); — the browser distributes them evenly. To control exactly where each color sits, add percentage positions: linear-gradient(90deg, red 0%, yellow 50%, blue 100%);
Does CSS gradient work in all browsers?
Yes. Linear and radial gradients have been supported since 2012 across all major browsers. Conic gradients have been fully supported since 2021. No vendor prefixes are needed in 2025. The generated code from this tool is standard CSS that works in Chrome, Firefox, Safari, and Edge.
What is a conic gradient in CSS?
A conic gradient transitions colors around a center point, rotating like a clock face. It is created with conic-gradient() and is commonly used for pie charts, color wheels, and decorative spinning effects.
Can I use a gradient on text in CSS?
Yes. Set the gradient as a background on the text element, then use background-clip: text and -webkit-text-fill-color: transparent. This makes the gradient show through the text shape instead of filling the background.
How many color stops can I add to a CSS gradient?
There is no official browser limit. Practically, gradients with 10 or fewer stops are easiest to maintain and generate clean code. This tool lets you add as many stops as you need.