Focus states hide bugs
Static previews never show hover, focus or disabled styling, which is where most interface problems actually live.
CSS Previewer: Visualise CSS, Gradients and Shadows Live
Free CSS visualizer and live previewer. Paste CSS to see it rendered, build gradients and box shadows visually, and preview hover, focus and disabled states instantly.
Free, no sign-upRuns in your browserNothing uploaded
@import, url() and position: fixed are stripped, so pasted CSS cannot load remote resources or escape this box.
No dropped declarations found for the elements in the preview.
A CSS previewer sounds redundant in 2026 - your browser already renders CSS. The reason it is still useful is failure. The CSS parser in every browser silently discards declarations it does not understand, so a typo produces a layout that is nearly right and gives you no error at all. This tool renders your CSS in a sandboxed frame, then reports which declarations the browser threw away, which is usually the missing semicolon or the property name you misspelled.
It also previews the states a static page never shows you. Hover, focus-visible, active and disabled are where most interface bugs live, and none of them appear until you interact with the thing. The state switcher applies a real interaction state to the preview so you can check focus ring visibility and disabled styling before shipping.
Two visual generators sit alongside the previewer. The gradient builder edits a live gradient with stops you can drag, choose from linear, radial and conic, and produce CSS in two syntaxes: the modern relative colour syntax and the widely supported colour function with alpha. The shadow builder composes multi-layer box shadows, which is how modern soft shadows are actually built, and reports the CSS you need for both the light and dark variants of a design system.
CSS Previewer & Design Playground features
Invalid declaration reporting
Flags selectors and properties the browser dropped instead of letting them fail silently, which is the main reason a CSS previewer is still worth using.
Interaction state preview
Applies hover, focus-visible, active and disabled to the sandbox so you can verify focus rings and disabled styling before shipping.
Sandboxed rendering
Strips @import, url() and fixed positioning so previewed CSS cannot load remote resources or break the surrounding page.
Visual gradient builder
Linear, radial and conic gradients with draggable stops, angle control and full-bleed preview, exported in modern and widely supported syntax.
Multi-layer box shadow builder
Stack several shadows with independent offsets, blur, spread and colour to build the soft layered shadows used in modern design systems.
Contrast-aware suggestions
Border-radius, spacing and colour suggestions are checked against WCAG contrast thresholds against the current background.
How to use the CSS Previewer & Design Playground
Paste your CSS
Drop it into the editor and the preview updates as you type. The preview is sandboxed: @import, url() and remote references are stripped, and position: fixed is contained so pasted CSS cannot escape the frame or load anything from the network.
Check the warnings
Any declaration the browser rejected is listed with the selector and property, so a silently dropped rule becomes visible.
Switch states
Use the state buttons to apply hover, focus-visible, active and disabled to the previewed elements. If your :focus-visible ring is invisible against the background, this is where you will find out.
Or build a gradient or shadow visually
Drag the gradient stops to reposition them, pick a second colour, and choose an angle or shape. The box shadow builder stacks multiple layers with independent blur, spread and colour.
Copy the CSS
One click copies the finished gradient or shadow, including the dark-mode variant when one is set.
Frequently asked questions
How do I find a CSS property the browser is ignoring?
Check the warnings panel under the editor. It lists each declaration the CSS parser rejected, which in practice is almost always a missing semicolon, a missing colon, or a misspelled property name such as backgroud instead of background.
Is my CSS executed?
Styles are applied, scripts are not. JavaScript inside pasted CSS is impossible, url() and @import are stripped so no remote resources load, and position: fixed is contained to the preview frame. The CSS parser will happily accept url() on a background image, so stripping it is the part that matters.
Which gradient syntax should I use?
For broad support use the classic form, for example linear-gradient(90deg, #3b82f6, #8b5cf6). Relative colour syntax with a slash alpha stop, such as rgb(from #3b82f6 oklch(0.6 0.2 258) / 50%), is cleaner and now supported in current Chrome, Safari and Firefox. Both are exported from the builder so you can pick per project.
How do I build the layered soft shadow used in modern UI?
Stack two shadows: a tight one with almost no blur for the contact edge, and a wider, low-alpha one for the ambient spread. The shadow builder produces exactly that, and can output the dark-mode variant where ambient shadows need to be lighter rather than darker.
Why can I not see the hover style in the preview?
Static previews cannot show hover, which is why the state buttons apply a real interaction state instead. Use them to check :hover and especially :focus-visible, since a focus ring that disappears against the background is a keyboard accessibility failure.
Related tools
Colour Picker & Palette GeneratorEyedrop any colour, get its hex code, and prove the palette is readable.OpenCSS MinifierStrip CSS comments and whitespace, and shorten colours and units safely.OpenHTML & CSS Snippet GeneratorBuild clean HTML and CSS boilerplate from a form and copy it straight into your project.Open
Every tool, in one place
ToolForge has css previewer & design playground plus a growing set of image, colour and developer tools. All of them run locally in your browser, free and without an account.
Browse all tools