CSS Gradient Generator
{{ summaryPrimary }}
{{ summaryLine }}
{{ badge.label }}
Start from a UI-ready recipe or keep the custom stop stack.
Choose the CSS gradient function before tuning direction and stop positions.
Use browser default for shortest CSS, or pick OKLab/OKLCH/HSL modes when you want explicit modern interpolation.
Set the linear-gradient angle in degrees.
deg
Choose the radial-gradient shape and extent keyword.
Set the center point as horizontal and vertical percentages.
X % Y %
Set the conic-gradient starting angle in degrees.
deg
Color stops:
Use 2-10 stops. Alpha below 100% exports rgba() for that stop.
Stop Color Position Alpha Actions
{{ index + 1 }}
%
%
Switches to repeating-linear-gradient(), repeating-radial-gradient(), or repeating-conic-gradient().
Class rule is ready to paste; declaration and custom property fit existing stylesheets.
Use background-image for component styles or background for shorthand snippets.
Use a class, element, or state selector such as .hero-gradient.
Example: hero-gradient exports --hero-gradient.
Adds a solid color before the gradient when exporting selector rules or declaration blocks.
Check the gradient against neutral, dark, transparent-grid, or warm canvases.
Set the preview swatch width and height in pixels.
W x px 
{{ cssCode }}
{{ previewLabel }}
Stop Color Position Alpha CSS stop Copy
{{ row.stop }} {{ row.color }} {{ row.position }} {{ row.alpha }} {{ row.cssStop }}
Check Status Detail Copy
{{ row.check }} {{ row.status }} {{ row.detail }}
Tags: Devtools, Image
Export to PDF Fullscreen
Customize
Advanced
:

CSS gradients are generated image values made from color transitions. They are used for hero backgrounds, buttons, cards, overlays, badges, charts, decorative accents, and stateful interface details where a flat color would feel too plain or where a raster image would be harder to resize cleanly.

The main design question is not only which colors look good together. A usable gradient also needs the right geometry. A linear gradient moves along an angle, a radial gradient spreads from a chosen center, and a conic gradient rotates around a center point. The same color stops can feel calm, directional, spotlighted, or circular depending on that geometry.

Linear, radial, and conic CSS gradient geometry with labeled color-stop positions.

Color stops are the anchors. Their order and positions decide where each color appears and how much room a transition receives. When stops are out of order, CSS still has rules for resolving them, but the visual result may no longer match the designer's mental sketch.

Modern CSS can also ask for a color interpolation space such as sRGB, linear sRGB, OKLab, OKLCH, or HSL hue interpolation. Those choices change the path between colors. A gradient that looks muddy in one interpolation space can look cleaner in another, but the final decision still needs a browser and design-context check.

Technical Details:

A CSS gradient is parsed as an image function, not as a color value. That is why it belongs in properties such as background-image or the background shorthand. The function name supplies the geometry, the optional interpolation clause supplies the color-space request, and the stop list supplies colors plus positions.

Gradient geometry changes how stop positions are interpreted. Linear stops fall along a line. Radial stops move from a center outward through a circle or ellipse. Conic stops move around a circle-like sweep, where percentages map around the full turn. Repeating variants use the same syntax as their non-repeating forms, then repeat the interval between the first and final stop positions.

Gradient Syntax Core:

Gradient kind Geometry part Stop-position meaning Common use
linear-gradient() An angle in degrees. Percentage along the gradient line. Banners, buttons, panels, and directional lighting.
radial-gradient() Circle or ellipse, size keyword, and center point. Percentage moving outward from the center. Highlights, glows, vignettes, and focal backgrounds.
conic-gradient() Start angle and center point. Percentage around a complete turn. Rings, wheels, accent dials, and segmented sweeps.
repeating-* Same geometry as the selected base function. First-to-final stop range becomes the repeat interval. Stripes, bands, radial ripples, and repeated conic accents.

The generated stop list is deliberately narrow. Stop colors are normalized to 3- or 6-digit HEX values, stop positions stay within 0% and 100%, and alpha values stay within 0% and 100%. A fully opaque stop exports as HEX. A translucent stop exports as rgba() so the alpha value is carried into the CSS stop itself.

CSS Images defines color-stop fixup for stop lists. If the first stop has no explicit position, it becomes 0%; if the final stop has no explicit position, it becomes 100%. A later stop that moves backward is adjusted to the largest earlier position. The tool warns before you rely on that fixup because accidental backward stops often mean the visual transition will not match the intended order.

Validation and Output Rules:

Rule Applied range or behavior Result cue
Stop count At least 2 stops are needed; only the first 10 stops export. Check gradient inputs appears when the count is outside the usable range.
Stop color HEX input is normalized; invalid color text is replaced with a safe HEX value before export. Color syntax reports Ready or Sanitized.
Stop position Positions are clamped from 0% to 100%. Color stops reports whether positions are ascending.
Alpha 100% keeps HEX output; lower values export rgba(). Stop Ledger shows the exact CSS stop fragment.
Modern interpolation default omits the clause; other choices emit syntax such as in oklab or in hsl longer hue. Interpolation reports Compatible or Modern.
Repeating range The first and final stop positions need a positive range for useful repetition. A warning appears when repeating stops begin and end at the same position.

The code shape can be a selector rule, a declaration value, or a CSS custom property pattern. Choosing background-image keeps fallback color separate, while background writes the shorthand. That distinction matters because the shorthand can reset other background subproperties in the target stylesheet.

Everyday Use & Decision Guide:

Start with Product hero, Linear, and Browser default interpolation when you need a paste-ready background for a component or landing section. Keep two or three stops for the first pass, then add stops only when a real midpoint color or band needs to be controlled.

Use Soft radial highlight when the gradient should draw attention to a focal area, and use Conic accent ring when the design needs a circular sweep. OKLab brand blend is useful for testing modern interpolation, but it should be checked in the browsers that will render the final page.

  • Click Sort after editing positions by hand. Ascending stops are easier to reason about and avoid unexpected color-stop fixup.
  • Use alpha below 100% for overlays, glows, and glass effects, then check the Transparent grid preview surface.
  • Choose Selector rule when you want a complete block, Declaration only when pasting into an existing rule, or CSS custom property when a reusable token fits the project.
  • Turn on Include fallback background-color when the generated rule or declaration should provide a solid color before the gradient.
  • Use Stop Ledger to inspect each stop fragment before copying CSS, especially when alpha or sanitized color input is involved.

A polished preview does not guarantee the gradient will read well behind text. The preview label uses a generic overlay, not the target typography, spacing, image content, or button state. Before shipping a gradient behind words or icons, test the copied CSS in the actual component and review contrast there.

The gradient value, preview, audit rows, tables, and JSON are produced in the browser session. The page can mirror option values into the URL, so avoid sharing a query string if a selector or token name reveals private project vocabulary.

Step-by-Step Guide:

  1. Choose Gradient preset. Confirm the summary updates with the expected stop count, function name, and interpolation badge.
  2. Set Gradient type. For Linear, adjust Linear angle; for Radial, set shape, size, and center percentages; for Conic, set the start angle and center percentages.
  3. Choose Color interpolation. Keep Browser default for shorter compatibility syntax, or choose an explicit modern mode when the target browser support has been checked.
  4. Edit Color stops. Keep 2 to 10 rows, use valid HEX colors, and click Sort if Check gradient inputs reports non-ascending positions.
  5. Open Advanced if you need a repeating function, selector output, a custom property name, fallback color, or a different preview surface and size.
  6. Review Gradient Preview, then open Stop Ledger and Syntax Audit. Fix warnings before trusting the copied CSS.
  7. Use Gradient CSS as the final handoff only after the function, stop order, interpolation row, and export shape all match the intended stylesheet use.

Interpreting Results:

The most important output is the CSS value or rule in Gradient CSS. The preview helps you spot visual problems, but the copied CSS is what the browser will parse in the target stylesheet.

Result cue What it means What to do next
Color stops: Ready The exported stop count is usable and positions are ascending. Compare Stop Ledger with the intended stop order before copying.
Color syntax: Sanitized At least one typed color was not accepted as HEX and was replaced before export. Replace the color with the intended HEX value, then recheck the preview.
Interpolation: Modern The output asks for an explicit color interpolation mode. Test the copied CSS in the target browser set before treating the visual as final.
Repeating range warning The first and final stop positions are equal, so the repeating interval has no useful span. Move the final stop farther from the first stop or turn repeating off.

Do not read Ready as a design approval. It means the generated syntax is coherent under the current inputs. Text contrast, responsive crop, brand fit, and support for modern interpolation still need review in the real component.

Worked Examples:

Product hero background

Choose Product hero, keep Linear, and leave Browser default interpolation selected. The summary should show linear 135deg with 3 stops. Gradient CSS should include a linear-gradient(135deg, #2563eb 0%, #7c3aed 46%, #14b8a6 100%) value inside the selected output shape.

Glass overlay with alpha

Choose Glass overlay and open Stop Ledger. Stops below 100% alpha should appear as rgba() fragments, while fully opaque stops stay as HEX. Use the Transparent grid preview surface if the gradient will sit over imagery or another background color.

Repeating gradient that needs a range

Turn on Use repeating gradient function and set both the first and final stop positions to 0%. The warning tells you the repeat range is not useful. Change the final stop to 100%, or a smaller positive value for tighter stripes, then confirm Syntax Audit no longer asks for review.

Out-of-order custom stops

In Custom gradient, place a middle stop at 80% and the next stop at 40%. The preview may still render because CSS has fixup rules, but Color stops reports that positions need sorting. Click Sort and recheck Stop Ledger before copying the CSS.

FAQ:

Why did one stop become rgba()?

A stop with alpha below 100% exports as rgba() so the transparency travels with that stop. Fully opaque stops remain HEX in Stop Ledger and Gradient CSS.

Why does Syntax Audit warn about stop order?

At least one stop position is lower than a previous stop. CSS can adjust that during color-stop fixup, but the result can surprise you. Use Sort, then confirm the order in Stop Ledger.

When should I choose OKLab or OKLCH?

Use OKLab or OKLCH when you want to test more perceptual blending than default syntax provides. Because those modes emit modern interpolation syntax, check the target browsers before relying on the exact appearance.

Why does the preview look different in my page?

The preview size, surface, and label are only a controlled check. The target component may have different dimensions, text, images, stacking, or background settings, so paste the final CSS into the real layout before approval.

Do gradient settings have to be sent to a server?

The gradient value, preview, stop ledger, syntax audit, and JSON output are created in the browser session. The settings can appear in the page URL, so treat shared URLs as visible configuration.

Glossary:

Color stop
A color anchor in the gradient, usually paired with a percentage position.
Interpolation
The color path between two adjacent stops.
Stop fixup
The CSS rule process that resolves missing or backward stop positions before painting.
Repeating gradient
A gradient function that repeats the first-to-final stop interval.
CSS custom property
A reusable variable name that can hold the generated gradient value.
Syntax Audit
The result table that summarizes function, stop, color, interpolation, and export-shape checks.

References: