Gradient Generator

How do you generate a CSS gradient or tiled background?

Select a Gradient Type, edit the colors and positions under Color Stops, then click Copy CSS. For a geometric background, open Patterns and choose a preset. The output includes the gradient and, when tiling is enabled, a separate background-size declaration. Copy both lines to keep the pattern at the size shown in the preview.

For a reproducible example, choose Stripes, select sRGB, leave Grain at 0, and use background output. This preset sets a 90-degree linear gradient with a 20px square tile. Its ink color is #4f46e5 and its paper color is #e0e7ff. Each color occupies half the tile: 20 × 0.5 = 10px. The generated CSS is:

background: linear-gradient(90deg, #4f46e5 0%, #4f46e5 50%, #e0e7ff 50%, #e0e7ff 100%);
background-size: 20px 20px;

The duplicate position at 50% makes a sharp boundary. Changing Tile size (px) scales the tile without changing those stop percentages. Patterns includes the following starting points; each begins with a 20px tile, and the colors remain editable.

Built-in pattern presets and their gradient geometry

Preset	Gradient type	Defining setting
Stripes	Linear	90-degree angle; shared stops at 50%
Diagonal stripes	Linear	45-degree angle; alternating quarter-tile stops
Checkerboard	Repeating Conic	Hard boundary at 25%; segment ends at 50%
Dots	Radial	Circle with closest-side sizing; boundary at 35%
Grid	Conic	90-degree angle; center at 5% horizontally and vertically
Zigzag	Conic	315-degree angle; center at 50% horizontally and 100% vertically

How do CSS gradients work under the hood?

CSS Images defines gradients as generated images. A linear gradient distributes colors along a line, a radial gradient spreads them outward from a center, and a conic gradient sweeps them around a center. This tool generates those three functions and their repeating counterparts. The preview uses the generated gradient as a CSS background, so you can inspect your settings before copying a declaration.

Color stops define both a color and a location in the transition. Here, Position runs from 0% to 100%, and Opacity runs from 0 to 100. The Hex color field accepts the six-digit #RRGGBB form. An opaque stop stays a hex color in the output; a partially transparent stop becomes an rgba() color with an alpha value derived from its opacity percentage. Use Color Converter to prepare a hex value from another color notation.

Click the bar to add a stop at that location, or use + Add Stop to insert one at 50%. Arrow keys move a focused handle by one percentage point. Delete or Backspace removes it only while more than two stops remain. The output sorts stops by position, allowing you to move handles past one another without manually reordering the CSS.

Why does color interpolation change the transition?

The selected interpolation space tells the browser how to mix colors between stops. Color Interpolation offers sRGB, OKLCH and HSL. Choosing OKLCH or HSL writes in oklch or in hsl into the CSS gradient function. Selecting sRGB leaves that part of the function unqualified. Compare the preview with your actual colors rather than assuming one setting will suit every pair.

Keep the distinction between CSS and exported images in mind. The export panel explicitly uses sRGB interpolation for PNG and SVG. Easing also mixes its additional stop colors in sRGB before the CSS is assembled. Consequently, changing the interpolation setting does not make the export renderer or the easing calculations operate in OKLCH or HSL.

How do repeating gradients differ from tiled backgrounds?

A repeating gradient repeats the interval between its first and last stops. A background tile instead repeats the entire generated image at the dimensions set by background-size. These are separate controls: the Stripes preset uses a regular linear gradient inside a tile, while Checkerboard combines a repeating conic gradient with a tile. Enabled tile sizes are whole pixels from 4 to 200; Turn tiling off removes the tile sizing declaration.

If a repeating type has stops at both 0% and 100% and tiling is off, the tool displays a notice that the gradient does not visibly repeat. Move an endpoint inward to shorten the repeating interval, or set a tile size. Two neighboring stops at the same percentage create the hard edges used in geometric patterns. Keep Easing between stops at None (linear) when building hard-edged designs with a non-repeating type.

What do the radial gradient size keywords control?

Radial mode exposes circle and ellipse shapes along with four ending-size choices from CSS Images. The size is measured relative to the gradient box and the selected center. The default is farthest-corner; the generated CSS omits that keyword when it is selected. Moving the center changes which sides or corners are nearest and farthest.

Radial ending-size choices

CSS keyword	Sizing reference
farthest-corner	The corner farthest from the center
farthest-side	The side or sides farthest from the center
closest-corner	The corner nearest the center
closest-side	The side or sides nearest the center

These choices change the transition's extent, not the element's dimensions. Reaching the final stop does not create an automatic hard outline: a sharp boundary still requires appropriate stop placement. Compare the preview after changing the size or center instead of treating a smaller radius as a different crop.

How do easing and grain change the result?

Easing between stops approximates a nonlinear transition by inserting extra color stops. Ease in, Ease out and Ease in-out insert eight intermediate stops per adjacent pair; Stepped constructs five flat bands per segment. The smooth easing modes retain the original endpoint colors. Repeating gradient types hide this control and skip easing in both CSS generation and image export.

Grain adds texture rather than changing the selected colors. At 0, no noise layer is emitted. A positive value adds an inline SVG noise image above the gradient in background output; PNG export draws a noise overlay locally. The CSS layer is embedded as a data URL. Grain is omitted from Text effect CSS, so judge that mode using its own preview.

How do you apply a gradient as a text effect?

Choose Text effect to generate a gradient background, both -webkit-background-clip: text and background-clip: text, and color: transparent. The clipping declarations limit the painted background to the glyph shapes. The transparent foreground lets that background show through. The output works with the selected gradient type and retains a tile sizing declaration when tiling is enabled.

Enter your own preview text before copying. Copy CSS provides declarations to apply to your text element; it does not create that element or export a text image. Check the text against its surrounding background in your final layout. Use Palette Generator when you need another set of endpoint colors to compare.

When should you use a conic gradient?

Conic gradients sweep around an origin. This tool writes a starting angle with from and the center position with at. Use a smooth sweep for decorative color wheels or repeated hard boundaries for angular motifs. The Grid and Zigzag presets demonstrate how moving the origin changes a tiled composition.

Hard stops also form chart-like sectors, but the generator does not calculate chart values, add labels, create a donut cutout, or supply an animation. Those require your own markup or styles. For a downloadable conic gradient image, choose PNG: SVG export is disabled for both conic types.

How do you export, save or share a gradient?

Download PNG renders the gradient locally, including tiling and grain. Export dimensions start at 1920 by 1080 pixels, round to whole pixels, and are capped at 4,096 pixels per side. Download SVG supports linear, repeating linear and non-repeating radial gradients with tiling off. Conic types, repeating radial gradients and tiled patterns disable SVG export and show a reason beside the controls.

The address bar updates automatically after a short delay, storing the settings in the ?g= parameter. Copy or bookmark that URL to restore the encoded type, stops, geometry, color space, output mode, tile size, easing and grain. There is no separate Share button. The encoded settings are readable data, not encryption; anyone with the link can recover them. Preview text is not included in the encoded gradient state.