Toolzi LogoToolzi

CSS Gradient Generator

Generate CSS gradient code instantly with a visual editor.

0%
100%

Preview

CSS Code

background: linear-gradient(to bottom right, #6366f1 0%, #ec4899 100%);

What is a CSS Gradient?

CSS gradients are smooth transitions between two or more colors, rendered directly in the browser without images. They are used for backgrounds, borders, and UI effects.

Types of CSS Gradients

Linear Gradient

Transitions colors along a straight line at a specified angle or direction. Defined with linear-gradient().

Radial Gradient

Transitions colors radiating outward from a center point in a circular or elliptical shape. Defined with radial-gradient().

Conic Gradient

Transitions colors rotating around a center point, like a pie chart. Defined with conic-gradient().

How to Use the CSS Gradient Generator

Select a gradient type (Linear, Radial, Conic), adjust the direction or angle, add or remove color stops, and copy the generated CSS code.

CSS Gradient Tips

Use rgba() or hex with alpha (#ff000080) for transparent gradients. Layer multiple gradients using comma-separated backgrounds. Conic gradients are supported in all modern browsers.

Frequently Asked Questions

What is a CSS gradient?
CSS gradients are color transitions generated with CSS functions like linear-gradient(), radial-gradient(), or conic-gradient() without using image files.
What is the difference between linear and radial gradients?
Linear gradients transition along a straight line, while radial gradients spread outward from a center point in a circular or elliptical shape.
How do I add transparency to a CSS gradient?
Use rgba() color values (e.g. rgba(255,0,0,0.5)) or 8-digit hex codes (e.g. #ff000080) in your color stops.
Is conic-gradient supported in all browsers?
Conic gradients are supported in all modern browsers including Chrome 69+, Firefox 83+, and Safari 12.1+.
Can I stack multiple gradients on one element?
Yes. CSS supports multiple backgrounds separated by commas. You can layer several gradients on a single element.
How do I create gradient text in CSS?
Apply the gradient as a background, then use -webkit-background-clip: text and color: transparent to make the text show the gradient.
What is a color stop in a CSS gradient?
A color stop defines a specific color at a specific percentage position along the gradient path.

Related Tools

CSS Gradient Text Generator →