CSS Gradient Generator

Visual editor for linear, radial and conic CSS gradients. Drag color stops, fine-tune the angle and copy the CSS code in one click.

Live preview 1200 × 600

Editor

Gradient controls

Gradient type

Angle 90°

Color stops

Gradient presets

CSS code

How to use the CSS Gradient Generator

Choose the gradient type, linear for an axis transition, radial for a circular fade, or conic for a sweep.
Set the angle (linear) or position (radial / conic) using the controls.
Click the color swatches under the bar to change colors. Drag the markers to reposition stops, or click the plus button to add more.
Browse the presets for inspiration, Instagram, Sunset, Northern Lights and more.
Click Copy to grab the CSS, or download a ready-to-use .css file with both background-image and a vendor-prefixed fallback.

Linear, radial and conic, what is the difference?

A linear gradient transitions colors along a straight axis defined by an angle. Set 0deg for bottom-to-top, 90deg for left-to-right, 180deg for top-to-bottom. Linear gradients are the most common choice for hero backgrounds, buttons and skeleton loaders.

A radial gradient radiates outward from a focal point. Use it for spotlights, vignettes and soft glow effects. You can switch the shape between an ellipse (default, follows aspect ratio) and a perfect circle.

A conic gradient sweeps colors around a center, producing pie chart and color wheel patterns. It is the newest of the three and unlocks effects that previously required SVG or canvas.

Tips for great gradients

Stay in the same hue family, purples to pinks read as natural light, while wildly different hues can clash.
Avoid muddy mids, when going from yellow to blue, add a green stop near the middle to keep colors lively.
Use 3+ stops for cinematic looks, orange → magenta → indigo creates a sunset that two stops cannot.
Test contrast for text, apply your gradient and check that body text remains readable against every part of it.
Use opacity stops for subtle layering, set a stop to partial opacity to blend the gradient with the element's background color rather than forcing a hard background override.

Common use cases for CSS gradients

Hero sections and page headers: full-width linear gradients from a brand color to a complementary shade are one of the most effective ways to create visual depth without loading an image. A 45deg diagonal gradient typically reads as more modern than a straight vertical one.

Buttons and call-to-action elements: a subtle two-stop gradient from a lighter to a slightly darker shade of the same color adds depth to flat buttons. Use a radial gradient with the focal point offset toward the top-left to simulate a light source hitting a surface.

Card backgrounds and section dividers: a very soft linear gradient from white to an extremely light tint of your brand color creates separation without drawing attention away from the content.

Data visualization: conic gradients are ideal for pie chart segments, donut charts and progress rings that would otherwise require SVG or a charting library. They can be animated with CSS transitions by changing the stop positions. If your design tokens or theme settings are stored as structured data, use the JSON Formatter to validate and organize them before copying values into CSS.

Frequently asked questions

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors used as a background. CSS supports three gradient types: linear-gradient along an axis, radial-gradient radiating from a point, and conic-gradient sweeping around a center. Gradients are rendered by the browser, so they scale perfectly without image compression or blurry exports.

How do I add more than two colors?

Click the add stop button in the color stop panel to insert another color. Drag any marker along the bar to reposition it, or type an exact percentage in the stop list. You can keep adding stops for softer transitions, brand palettes, aurora effects, shadows or cinematic backgrounds. The CSS updates instantly as you edit.

Is the generated CSS supported in all browsers?

Yes. The output uses standard CSS gradient syntax supported by modern browsers including Chrome, Firefox, Safari, Edge and Opera. Linear and radial gradients are extremely mature. Conic gradients require newer engines, but they are now broadly supported across current desktop and mobile browsers. The copied code works with background and background-image.

Can I save my gradient for later?

The current gradient is remembered only for the active browser tab, so you can refresh without losing the design during the session. It is not stored permanently after the tab closes. For long-term use, copy the generated CSS into your stylesheet, design system tokens or notes app, or download the small CSS file. If you export the gradient preview as an image, use the Image Compressor to reduce file size.

Can I use the gradient for text or buttons?

Yes. The generated value can be used anywhere CSS accepts a background image, including cards, buttons, banners, dashboards and app shells. The downloaded CSS also includes a gradient text example using background-clip. When placing text over a gradient, always check contrast across the brightest and darkest areas before publishing. Test hover states too.

How do I create a gradient that fades to transparent?

Open the color picker for the stop you want to fade and set its opacity (alpha channel) to 0. This produces a smooth transition from a solid color to fully transparent, blending the gradient with whatever is behind the element, useful for hero overlays, image vignettes, section dividers and card fade-outs. Make sure the parent or page background has an intentional color behind the transparent area, otherwise the fade will reveal the default white or dark background instead of the effect you planned.

Can I animate a CSS gradient?

CSS cannot directly transition gradient color stops using the standard transition property, but you can achieve smooth animation with two reliable workarounds. The first is to animate background-position on a gradient that is larger than the element, common for scrolling shimmer and moving aurora effects. The second is to layer a second gradient on a pseudo-element and animate its opacity, which works across all modern browsers without JavaScript. In Chrome and Edge you can also use the experimental @property rule to register custom properties as color or number types, enabling true gradient stop animation with a regular CSS transition.

Back to All Tools