OnSumoTools

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 does the CSS Gradient Generator work step by step?

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, ...); `

What does a typical CSS Gradient Generator result look like?

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.

Related tools

Three kinds of gradient

Linear gradients blend along a line, at any angle. Radial gradients spread out from a point, like a glow. Conic gradients sweep around a center, like a color wheel or pie chart. This tool builds all three with draggable stops and gives you copy-ready CSS.

Turn on repeating mode for stripes and patterns.

Working with stops

A stop is a color at a position. Drag it along the bar, or click to add more. Two stops at the same position make a hard edge instead of a blend, which is how you get stripes.

A hint is a different thing: it moves the midpoint between two stops, shifting where the blend feels halfway. Use it to bias a gradient toward one color.

Direction

For a diagonal, use an angle such as 135deg, or keywords like to bottom right. 0deg points up and 90deg points right. Angles are easier to reason about than keywords once you've used them a few times.

Transparent stops

Fading to transparent is common for overlays and image fades. Use the same color at zero opacity, such as rgba(0,0,0,0), rather than the keyword transparent. Older behavior blended toward gray in some browsers, and the explicit form avoids that.

Smooth versus banding

Gradients between close colors can show visible bands on some screens. Adding a touch of noise as an overlay, or more mid stops, hides it. Check on a real display, and not just your own monitor.

Output and Tailwind

Output is standard CSS with no prefixes needed in current browsers. In Tailwind, paste it as an arbitrary value or define it in your theme, since built-in gradient utilities cover only simple linear cases.

Everything stays in your browser.

Three kinds, three jobs

Linear gradients blend along a line and suit backgrounds and buttons. Radial ones spread from a point, good for glows and spotlights. Conic gradients sweep around a center and give you pie charts and color wheels with no images.

Add color stops and drag them to control where each color sits. Two stops at the same position make a hard edge, which is how stripes are made.

Avoiding muddy blends

Blending two saturated colors can leave a gray zone in the middle. Add a third stop that's brighter or pick colors close in hue. Test on different screens, because gradients can band on cheaper displays.

Make sure text on a gradient stays readable at both ends, and not just in the middle.

Smoother gradients

Gradients between two colors can look muddy in the middle, especially across opposite hues. Add a middle stop with a brighter color to keep it clean. Banding appears on large, subtle gradients, and a touch of noise or an extra stop hides it.

Use gradients behind text sparingly, and check contrast at the lightest and darkest point.

For performance, a CSS gradient beats an image every time. It scales to any size and costs no extra request.

Layer gradients with commas for patterns. Stripes, grids and spotlights are only a few lines of CSS.