Design Tool
CSS Gradient Generator
Create linear and radial CSS gradients with a live preview, tune color stops and angle, then copy the ready-to-use CSS. Everything runs in your browser, nothing is uploaded.
Type
Angle
135°Color Stops
Preview
CSS
background: linear-gradient(135deg, #a35fff 0%, #22d3ee 100%);How it works
A CSS gradient is an image the browser generates at render time, not a file it downloads. The gradient data type is a member of the CSS image type, and functions such as linear-gradient() and radial-gradient() produce the pixels from a short declaration. The CSS Images Module Level 3 specification defines those functions, their grammar and their interpolation rules, so the declaration this tool copies behaves the same in any conforming engine. No bitmap crosses the network, the result scales with the element's box at render time, and nothing is stored on disk. A gradient therefore costs no request, no storage and no asset pipeline, which makes it a natural fit for background decoration on pages of any size, from a landing page hero to a compact card.
Every linear gradient is drawn along an invisible axis called the gradient line, which runs through the center of the box.
The angle chooses the direction of that line. CSS follows the compass convention of a circle: 0deg points up, 90deg points right, 180deg points down and 270deg points left, which is why a 90deg gradient reads left to right. The line's length and starting point are derived from the element's box, so the end colors reach its corners. Each color stop fixes one color at one position along the line, and the browser interpolates every pixel between two adjacent stops.
A radial gradient instead radiates from a center point outward toward the edges of the element.
The generator assembles this into one background declaration. It builds the argument list the standard expects: the type keyword, an optional angle, and a comma-joined sequence of color stops. Stops are sorted by position before they are joined, so the output stays predictable even when a stop is dragged past its neighbor. Sorting also avoids an accidental hard edge, because the specification requires a stop placed before its predecessor to collapse to that predecessor's position. The final declaration uses the standard grammar, so it pastes into a stylesheet, a CSS-in-JS file or a Tailwind arbitrary value, it stacks with other layers through the multi-background syntax, and no custom parsing or post-processing is involved on the output.
Because the specification interpolates in premultiplied RGBA space, blending two semi-transparent stops avoids the gray haze of naive blending.
Use cases
- Hero banners and sections that stay crisp at any viewport size.
- Buttons, pills and badges with subtle two-tone depth.
- Brand color transitions on cards, headers and landing pages.
- Gradient overlays on images to improve text legibility.
- Skeleton loaders and placeholder shimmer effects.
- Text effects, where the gradient is clipped to letter shapes.
- Call-to-action sections that draw the eye to a button.
Troubleshooting
- Banding: banding usually appears on low-bit-depth screens with very gradual transitions. An intermediate stop near the problem area or a subtle noise texture spreads the transition across more values, which softens the visible steps. The banding is a display limitation, not a CSS flaw.
- Direction feels wrong: 0deg points up, not right. 90deg runs left to right, so use 90deg for horizontals.
- Solid block of color: two stops at the same percentage make a sharp boundary that reads as a flat color. Move one stop.
- Stops out of order: the specification requires a stop positioned before its predecessor to collapse to that predecessor's position, creating a hard seam. This tool sorts stops as you work, so the output never contains that edge case.
- Older browsers: engines without gradient support ignore the image layer. Declare a background-color first, then the gradient, so fallback looks intentional.
- Overlay contrast: check overlaid text at both ends of the gradient, because contrast shifts beneath.
- Shorthand resets: the background shorthand resets related layers such as background-position, background-size and background-repeat to their initial values. If the element already sets them, use background-image instead, or re-declare the layers after the shorthand. The shorthand is a reset, not an addition.
FAQ
How do I make a horizontal left-to-right gradient?
Set the angle to 90deg. In CSS, 0deg points up, 90deg right, 180deg down and 270deg left, so a 90deg linear-gradient runs left to right.
What does the percentage next to each color mean?
It marks the position along the gradient line where that color is purest. Colors between two stops interpolate smoothly, so 0% is the start, 100% is the end and 50% is the middle.
Can gradients use transparency?
Yes. CSS colors accept rgba() or 8-digit hex with an alpha channel, useful for overlays and fades.
Why does my gradient look banded?
Banding usually appears on low-bit-depth screens with very gradual transitions. An intermediate stop near the problem area smooths the steps.
Does this support conic gradients?
No. This tool covers linear and radial gradients only. Conic gradients (conic-gradient) sweep around a center point in angular steps, and repeating variants such as repeating-linear-gradient() repeat the pattern along the line. All come from the same specification, though this generator does not emit them.
Do color stops have to be percentages?
No. The specification treats a stop without a position as distributed evenly between the nearest stops that do declare positions, and the first and last stops default to 0% and 100%. Plain lengths such as 24px are valid too and resolve against the element's box. This generator writes percentages because they scale with the element, and a declaration edited to use lengths follows the same grammar and renders as the standard defines. The normalization rules run before rendering, so a mix of positioned and unpositioned stops still resolves to definite positions.
Can I apply a gradient to text?
Yes, with the background-clip technique. Declare the gradient as the background, then set background-clip: text and color: transparent, and the gradient shows through the letter shapes instead of the box. The technique is documented on MDN, and production sites commonly keep the -webkit- prefixed form alongside the standard one. Pair it with a fallback color for engines that ignore background-clip.
The CSS gradient standards behind this generator
The behavior this tool relies on is defined by the W3C specifications below.
- CSS Images Module Level 3 defines linear-gradient(), radial-gradient(), the repeating variants, the gradient line geometry and the interpolation rules the copied declaration follows.
- MDN: CSS gradients is the reference for the gradient data type and the three functions, backing the angle and fallback notes above.
- CSS Color Module Level 4 specifies the hex and rgb() syntax used in the stops, including the 8-digit alpha forms in the FAQ.
- WCAG 2.2 provides the contrast requirements that matter for text on a gradient overlay.