Starlight Tools

Web CSS Tool

CSS Gradient Generator

Design linear, radial, conic, and repeating CSS gradients with draggable color stops, opacity controls, live preview, import/share links, and copy-ready formats for real projects.

About This CSS Gradient Generator

This tool builds CSS gradients visually and keeps the generated code close to what you would write by hand. Choose a linear, radial, conic, repeating linear, or repeating radial gradient, then adjust color stops, opacity, angles, center points, and interpolation. The preview updates immediately, while the output panel keeps a copy-ready declaration available for backgrounds, text fills, borders, CSS variables, Tailwind arbitrary values, SVG approximations, canvas code, Android XML, and SwiftUI.

The editor is designed for practical frontend work rather than decorative demos only. Use it to test a subtle card surface, a high-contrast button, an image overlay, a hero background, a conic progress ring, or a repeated stripe pattern. Presets give you a fast starting point, but every generated gradient can be changed through the same controls, imported from existing CSS, reversed, randomized, spread evenly, and shared with the current settings in the URL.

Color-stop position is the main control for how a gradient feels. Stops far apart create broad, smooth blends. Stops close together create sharp transitions, stripes, dividers, and texture effects. Opacity is useful when the gradient needs to sit over photography or video, because transparent stops can improve text readability without permanently editing the underlying image. The compatibility setting adds a fallback color and older syntax notes when you need a more defensive snippet for legacy browser targets.

Modern CSS also supports more nuanced color interpolation in some browsers. The default sRGB mode is the safest baseline, while OKLAB, OKLCH, LAB, HSL, and linear RGB can change perceived brightness and color travel between stops. When you use these enhanced modes, test the result against the browsers and devices your project supports. For public pages, pair the gradient with sufficient foreground contrast; decorative color is fine, but text and controls still need to remain readable across the lightest and darkest parts of the background.

Everything runs locally in the browser. The colors you choose, imported CSS, and generated snippets are not uploaded, which makes the page suitable for client projects, design-system tokens, prototypes, and quick production fixes. The generated CSS is free to use in personal, commercial, and client work.

Preview

linear-gradient at 90deg with 2 stops Selected stop: 1
Runs locally No uploads Free generated CSS Last reviewed: June 23, 2026

Copy Output

/* CSS will appear here */

Gradient Controls

Click the rail to add a stop. Drag handles to move. Select a stop, then press Delete or Backspace to remove it.

Import supports common hex, rgba(), hsla(), named transparent, angles, radial/conic centers, and stop percentages.

Preset Gradient Gallery

Compatibility Notes

Standard CSS gradients are safe for modern evergreen browsers. Maximum compatibility mode adds a fallback color first, includes an older -webkit- line for simple gradients, and calls out where advanced color interpolation may need a progressive-enhancement check.

FeatureSupport guidanceFallback
linear-gradient()Widely supported in current browsers.Solid fallback color.
radial-gradient()Widely supported in current browsers.Solid fallback color or linear fallback.
conic-gradient()Supported in current evergreen browsers.Static image or radial/linear approximation for older browsers.
repeating gradientsSupported in modern browsers for linear and radial patterns.Small tiled image or non-repeating gradient.
OKLAB/OKLCH/LAB interpolationModern syntax; test your browser support target.Default sRGB gradient before the enhanced declaration.

Practical CSS Gradient Examples

CSS Gradient Syntax Guide

linear-gradient()

background-image: linear-gradient(90deg, #2563eb 0%, #22d3ee 100%);

Linear gradients flow along an angle or direction keyword. CSS angles start at 0deg upward and increase clockwise, so 90deg runs left to right.

radial-gradient()

background-image: radial-gradient(circle farthest-corner at 50% 40%, #fff 0%, #2563eb 100%);

Radial gradients spread from a center point. Shape can be circle or ellipse; size keywords include closest-side, farthest-side, closest-corner, and farthest-corner.

conic-gradient()

background-image: conic-gradient(from 45deg at 50% 50%, red 0%, blue 100%);

Conic gradients rotate around a center point. They work well for color wheels, progress rings, pie-chart effects, and angular highlights.

Color stops

rgba(37, 99, 235, .75) 20%

A color stop pairs a color with a position. Put stops closer together for sharper transitions or repeated stripe patterns.

Repeating gradients

repeating-linear-gradient(90deg, #111 0 10px, #fff 10px 20px)

Repeating gradients loop their stop pattern and can create stripes, grid lines, and lightweight CSS-only textures.

Color quality

linear-gradient(in oklab, #f97316, #ec4899)

Default gradients interpolate in sRGB. Modern interpolation modes such as oklab, oklch, lab, hsl, and srgb-linear can produce smoother perceived lightness or more vivid color transitions where supported.

References: MDN CSS gradients, MDN linear-gradient(), MDN radial-gradient(), MDN conic-gradient(), and W3C CSS Images Module Level 4.

CSS Gradient FAQ

How do I make a transparent CSS gradient?

Select a stop and lower its opacity. The generator outputs rgba() stops so you can create overlays, fades, and transparent hero backgrounds.

How do I make a text gradient?

Use the Text Gradient output tab. It combines background-image, background-clip:text, -webkit-background-clip:text, and transparent text color.

Linear versus radial versus conic: which should I use?

Use linear for directional blends, radial for spotlight or glow effects, and conic for angular color wheels, progress rings, or pie-like effects.

How do I avoid gradient banding?

Try closer stop positions, reduce extreme low-contrast ramps, use modern interpolation such as OKLAB/OKLCH where supported, or add a subtle noise layer in your final design.

What browser support should I expect?

Linear, radial, conic, and repeating gradients work in current evergreen browsers. Use maximum compatibility mode for fallback colors and prefix notes when targeting older clients.

Can I use gradients in Tailwind CSS?

Yes. The Tailwind tab outputs an arbitrary value class using escaped spaces. For complex gradients, consider storing the generated value in your Tailwind theme or CSS variable.

How do repeating gradients work?

The color-stop sequence repeats forever. Put stops close together to create stripes, ruled-paper lines, dividers, or pattern backgrounds.

Can I overlay a gradient on an image?

Yes. Put the gradient first in background-image, followed by the image URL. The practical examples section includes a copyable image overlay pattern.

Are gradients accessible?

Gradients are usually decorative, but text placed over them still needs sufficient contrast across the whole background. Test both the lightest and darkest regions.

Are generated gradients free to use?

Yes. The generated CSS is free to use in personal, commercial, and client projects.

Explore more tools