About the CSS Gradient Previewer
The CSS Gradient Previewer shows what a gradient looks like before you put it on your site. Paste a linear-gradient(), radial-gradient() or conic-gradient(), or a whole background: line copied from a stylesheet, and the preview updates as you type.
It is the quickest way to check a gradient you found in a code snippet, a design handoff or a browser's developer tools. The tool tells you whether the CSS is valid, points out a missing or extra parenthesis, and counts the gradient layers when several are stacked.
You can preview in a wide banner, a square tile or a tall phone shape, show a checkerboard behind transparent colors, and open the gradient full screen. Everything runs in your browser, so the CSS you paste never leaves your device.
How to use it
- Paste your gradientPaste a gradient, a background or background-image declaration, or several layers separated by commas. The property name, !important and the final semicolon are removed for you.
- Read the statusBelow the preview, "Valid CSS" shows how many gradient layers were found. An error message explains what went wrong.
- Change the preview shapeSwitch between Wide, Square and Phone to see how the gradient behaves in different proportions.
- Check transparencyLeave "Show transparency" on to see a checkerboard behind transparent parts, or turn it off to see them against the page.
- Go full screenClick Full screen to view the gradient on your whole display, then press Esc to return.
Key features
Accepts real-world CSS
Reads bare gradients and full declarations copied from stylesheets, with or without background:, background-image:, !important or a semicolon.
Parenthesis check
Counts opening and closing parentheses and tells you how many are missing, or that there is a ")" without a matching "(".
Browser validation
Asks your browser whether it can draw the value, so the result matches what your visitors will see in the same browser.
Layer count
Counts the gradients in stacked backgrounds and notes when a value is a plain color rather than a gradient.
Three shapes and full screen
Wide, square and phone-shaped previews show how angles and radial shapes change with the box.
Five examples
Linear, radial, conic, striped and OKLCH rainbow samples to start from or compare with.
Examples
Pasting a declaration from a stylesheet
background-image: linear-gradient(to right, red, blue) !important;The tool removes background-image:, !important and the semicolon, draws the gradient and shows Valid CSS with 1 gradient layer.
Messages for common mistakes
| You paste | Message |
|---|---|
A gradient that ends without its last ) | 1 closing parenthesis is missing. |
A gradient with one ) too many | There is a ")" without a matching "(". |
linear-gradient(90, red, blue) | Your browser cannot read this background. Check the commas, units and color names. |
linear-gradient(135deg #2b59ff, #c6f24e) | The same message: a comma is missing after the angle. |
In the third case the angle needs a unit: 90deg. A misspelled color such as #c6f24g gives the same message. While there is an error, the preview stays empty, so you never mistake an old gradient for the new one.
The parenthesis check matters more than it looks. Some browsers quietly close a missing parenthesis in a preview, but in a stylesheet it can break every rule that follows.
Stacked layers
A common hero background darkens the bottom of the box and adds a soft glow in a corner, on top of a solid color:
linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.7)),
radial-gradient(circle at top left, #ffd6a5, transparent 60%),
#2b59ffThe status reads Valid CSS with 2 gradient layers. The first layer is drawn on top, and the plain color at the end fills everything behind. Pasting just #2b59ff gives "no gradient, plain background".
Why the shape matters
The wide preview is much wider than it is tall. Switch to Square (360 × 360 pixels on a desktop screen) or Phone (220 × 440) and a 135deg gradient changes its diagonal, while a circle radial gradient keeps its round shape and an ellipse stretches with the box.
Tips
- Check gradients in the Phone shape before you ship them. A diagonal that looks great on a wide banner can turn almost vertical on a narrow screen.
- Turn off "Show transparency" when a gradient fades to transparent, to see how it will look on a plain page background.
- When a long background will not validate, delete layers one by one until it does. The last one you removed holds the error.
- Use the Full screen view to check banding on smooth, low-contrast gradients. Large areas show steps that a small preview hides.
- To change colors or angles with sliders instead of editing code, rebuild the gradient in the Gradient Generator.
Common mistakes and limits
- Leaving out unitsAngles need deg, turn or rad, and positions need % or a length. linear-gradient(90, red, blue) is invalid; write 90deg.
- Forgetting the comma after the angle or shapeThe angle and the first color are separate parts of the gradient and need a comma between them.
- Copying old -webkit- gradientsPrefixed versions use an older syntax in which "left" means "start from the left". Chrome and Safari still read them, but write the standard gradient for new code.
- Putting the solid color first in stacked layersLayers are drawn from first to last, top to bottom. A plain color is only allowed as the last layer, behind all gradients.
- Trusting one browser for every visitorValidation uses the browser you are in. Newer features such as "in oklch" may be missing in older browsers, so test those separately.