What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors, applied as a background image with no actual image file. Gradients are rendered by the browser as a vector, which means they scale perfectly at any size, work in dark mode, and don't add network requests to your page. They're the most performant way to add color depth, visual hierarchy, and brand expression to a website. This free CSS gradient generator supports all three modern gradient types — linear, radial, and conic — with unlimited color stops, custom positions, and one-click CSS export.

The three types of CSS gradients

Linear gradient — colors transition along a straight line at a specified angle. The default workhorse for hero sections, buttons, and section dividers. Syntax: linear-gradient(135deg, #667eea, #764ba2).
Radial gradient — colors radiate outward from a center point in a circle or ellipse. Useful for spotlight effects, sun/moon visuals, and concentric depth. Syntax: radial-gradient(circle, #ffd700, #1a1a1a).
Conic gradient — colors rotate around a center point like a color wheel or pie chart. Newer (CSS Images 4) and supported in all modern browsers. Great for color pickers, dashboards, and decorative spinners. Syntax: conic-gradient(from 0deg, red, yellow, green, cyan, blue, magenta, red).

CSS gradient syntax reference

Type	Syntax example
Linear, 2 colors	`linear-gradient(135deg, #667eea, #764ba2)`
Linear, custom stops	`linear-gradient(90deg, red 0%, yellow 50%, blue 100%)`
Radial circle	`radial-gradient(circle, #ffd700, #1a1a1a)`
Radial ellipse with size	`radial-gradient(ellipse closest-side, #4facfe, #00f2fe)`
Conic basic	`conic-gradient(red, yellow, green, cyan, blue, magenta, red)`
Conic with starting angle	`conic-gradient(from 45deg, #ff0080, #7928ca)`
Repeating linear	`repeating-linear-gradient(45deg, #000, #000 10px, #fff 10px, #fff 20px)`

Frequently Asked Questions

What angle should I use for a linear gradient?

0deg goes bottom-to-top, 90deg left-to-right, 135deg top-left to bottom-right, and 180deg top-to-bottom. 135° is the most popular angle in modern UI design because it creates a natural diagonal flow that matches how Western readers scan a page.

Can I use more than two colors?

Yes — this generator supports up to 10 color stops with custom positions. Drag the position slider on any stop to control where it sits in the gradient. The CSS output reflects every stop you add. For rainbow effects, distribute 6-7 stops evenly across 0-100%.

Do conic gradients work in all browsers?

Yes. Conic gradients have been supported in Chrome, Safari, Firefox, and Edge since 2020-2022. They're now safe for production use without fallbacks. If you need to support older browsers, provide a solid-color fallback via background-color before the gradient declaration.

How do I export the gradient for Tailwind CSS?

Tailwind v4 supports arbitrary gradient values directly: bg-[linear-gradient(135deg,#667eea,#764ba2)]. Use the "Copy value" button above to get just the gradient expression (without the background:prefix) so you can paste it into a Tailwind arbitrary value or a CSS-in-JS prop.

Are gradients better than solid colors for performance?

Yes — significantly. Gradients render at the GPU level as vector data, while solid background images (PNG/JPEG) add HTTP requests, increase bundle size, and can't adapt to dark mode or different viewports without media-query swaps. CSS gradients are always sharp at any resolution and respond to CSS variables.

What is a radial gradient's "size" keyword?

closest-side ends the gradient at the nearest box edge, farthest-corner (default) ends at the farthest corner. closest-corner and farthest-side are the other two options. For most decorative use cases, farthest-corner with circle gives the most natural look.

CSS Gradient Generator