What gradient types does the tool support?

The tool supports linear-gradient, radial-gradient, conic-gradient, repeating-linear-gradient, and repeating-radial-gradient. These cover the five gradient functions defined in the W3C CSS Images specifications. Mesh gradients (a non-standard feature available only in some tools) are not supported because they have no equivalent CSS property.

Does the tool output vendor prefixes?

Yes. The tool outputs the standard property, the -webkit- prefix for older Safari and Chrome compatibility, and a solid color fallback for browsers that do not support the gradient function at all. You can turn off vendor prefixes in the output settings if you are targeting only modern browsers.

How do I set a transparent color stop?

Use the color picker's alpha slider or enter a color in rgba() or hex-with-alpha format (8-digit hex: #RRGGBBAA). For example, #1a237e80 is the same blue at 50% opacity. Transparent stops are useful for overlaying a gradient over an image or another background. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.

What is the difference between a color stop position and a hint?

A color stop position (like 50%) tells the browser exactly where a color is fully formed. A color hint (a single length or percentage between two stops, like linear-gradient(red, 20%, blue)) shifts the midpoint of the transition between two colors without adding a new fully-opaque color. The tool supports both and labels them distinctly in the editor.

How do I create a diagonal gradient?

Use the direction input and enter a degree value: 45deg for top-left to bottom-right, 135deg for the opposite diagonal. You can also use keyword directions (to right, to bottom right) which the tool converts to their degree equivalents in the output. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.

Is the output compatible with Tailwind CSS?

The tool outputs standard CSS property values. To use them in Tailwind, add the gradient as a custom value in your tailwind.config.js under the backgroundImage key, or use Tailwind's arbitrary value syntax: bg-linear-gradient(90deg,#1a237e,#00bcd4)]. The [Tailwind to CSS Converter can help if you need to go the other direction.

CSS Gradient Generator

This tool builds CSS gradient code visually. Choose between linear, radial, and conic gradient types, pick your colors and stop positions with a visual editor, and the tool outputs the complete CSS property ready to paste into your stylesheet. Everything runs in your browser. Your color choices and generated code never leave your device.

How this tool works

A CSS gradient is a CSS image value produced by a gradient function. The three main types each take a direction or shape plus a list of color stops. Linear gradient formula: `css background: linear-gradient(direction, color-stop-1, color-stop-2, ...); `

Worked example

You want a horizontal gradient from a deep blue to a bright teal for a hero section background. Settings: - Type: linear - Direction: 90deg (left to right) - Stop 1: #1a237e at 0% - Stop 2: #00bcd4 at 100%

Frequently asked questions

What gradient types does the tool support?
The tool supports linear-gradient, radial-gradient, conic-gradient, repeating-linear-gradient, and repeating-radial-gradient. These cover the five gradient functions defined in the W3C CSS Images specifications. Mesh gradients (a non-standard feature available only in some tools) are not supported because they have no equivalent CSS property.
Does the tool output vendor prefixes?
Yes. The tool outputs the standard property, the -webkit- prefix for older Safari and Chrome compatibility, and a solid color fallback for browsers that do not support the gradient function at all. You can turn off vendor prefixes in the output settings if you are targeting only modern browsers.
How do I set a transparent color stop?
Use the color picker's alpha slider or enter a color in rgba() or hex-with-alpha format (8-digit hex: #RRGGBBAA). For example, #1a237e80 is the same blue at 50% opacity. Transparent stops are useful for overlaying a gradient over an image or another background. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.
What is the difference between a color stop position and a hint?
A color stop position (like 50%) tells the browser exactly where a color is fully formed. A color hint (a single length or percentage between two stops, like linear-gradient(red, 20%, blue)) shifts the midpoint of the transition between two colors without adding a new fully-opaque color. The tool supports both and labels them distinctly in the editor.
How do I create a diagonal gradient?
Use the direction input and enter a degree value: 45deg for top-left to bottom-right, 135deg for the opposite diagonal. You can also use keyword directions (to right, to bottom right) which the tool converts to their degree equivalents in the output. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.
Is the output compatible with Tailwind CSS?
The tool outputs standard CSS property values. To use them in Tailwind, add the gradient as a custom value in your tailwind.config.js under the backgroundImage key, or use Tailwind's arbitrary value syntax: bg-linear-gradient(90deg,#1a237e,#00bcd4)]. The [Tailwind to CSS Converter can help if you need to go the other direction.