TXT · Text & Data tools

CSS Gradient Generator

CSS
background: linear-gradient(135deg, #ff512f 0%, #f09819 50%, #dd2476 100%);

3 stops · linear · 135°

CSS Gradient Generator

Build multi-stop CSS gradients and see the result update as you drag stops, change the angle, or switch between linear, radial, and conic types. The output is a copy-ready background rule that works in every browser that supports CSS gradients.

Gradient types

Linear gradients transition along a straight line defined by an angle. 0deg points up, 90deg points right, and values wrap at 360deg.

Radial gradients spread outward from a center point. The shape can be a circle (equal radius in both directions) or an ellipse (stretched to fit the element). Moving the center point shifts the focal point of the gradient.

Conic gradients rotate around a center point like the sweep of a clock hand. They are useful for pie-chart-style fills, color wheels, and angular patterns that repeat when combined with the repeating toggle.

Color stops and the stop bar

Each gradient needs at least two color stops. Click the gradient bar to add a stop at that position. Select a stop to edit its color and position, or drag the handle along the bar. The Reverse button flips all positions, Even distributes stops at equal intervals, and Add inserts a new white stop at the midpoint.

Color interpolation

The default sRGB interpolation is the most compatible, but blending between certain color pairs (like blue and yellow) can produce a grey or brown mid-tone. Switching to OKLab or OKLCH keeps the mid-tones vivid because those color spaces are perceptually uniform. HSL interpolates through the hue wheel, which can introduce unexpected hues when stops are far apart. Display P3 uses a wider gamut on supported screens, but falls back to sRGB on standard displays.

Browser support for in oklab and in oklch is wide in 2024-era browsers (Chrome 111+, Firefox 127+, Safari 16.2+). Older browsers ignore the interpolation hint and use sRGB.

Repeating gradients

The repeating toggle changes linear-gradient to repeating-linear-gradient (and similarly for radial and conic). Stops that end before 100% tile continuously, creating stripes, rings, or angular bands depending on the type. For clean tiling, make sure the first and last stop colors differ enough to see the seam, or match them for a smooth loop.

Presets and randomize

The preset grid applies a curated stop list and angle in one click. Random generates 2 to 4 stops with arbitrary colors and angle, which is a starting point for exploration rather than production use.

Exporting

Copy the CSS rule to paste it directly into a stylesheet, or export a rasterized PNG at a chosen resolution (512, 1024, 1920 × 1080, 2560 × 1440, or 3840 × 2160). The PNG is rendered via the Canvas API and may differ slightly from the CSS version for conic gradients or non-sRGB interpolation since the Canvas API does not support all CSS gradient features.

Frequently Asked Questions

Linear, radial, and conic. Each type has its own direction or position controls. Linear gradients use an angle in degrees, radial gradients set a center point and shape, and conic gradients combine a start angle with a center point.

Click anywhere on the gradient bar to add a new stop at that position. Select a stop by clicking its handle, then drag it to reposition or use the slider for exact placement. The Remove button deletes the selected stop as long as at least two stops remain.

It controls how the browser blends colors between stops. sRGB is the default and works everywhere. OKLab and OKLCH produce more perceptually uniform transitions, which avoids the muddy mid-tones that sRGB sometimes creates between complementary colors. HSL interpolates through the hue wheel. Display P3 uses a wider color gamut on supported screens.

Yes. Choose a resolution from the export panel and click Export PNG. The gradient is drawn to a canvas element at the selected size and downloaded as a PNG file. For CSS-only use, copy the generated CSS rule instead.

It switches the CSS function from gradient to repeating-gradient. The color stops tile continuously in the chosen direction, which is useful for stripe or band patterns where the stops do not span the full 0-100% range.

Yes. Every setting including the color stops, gradient type, angle, and interpolation is stored in the URL query string. Copy the address bar to share or bookmark a specific gradient.

Explore Our Tools

Browse all tools