CSS Unit Sandbox
Preview how common CSS units resolve in a live sample.
Watch CSS units resolve live
px, rem, em, %, vw, vh — each CSS unit resolves against something different, and their real sizes are easy to misjudge. This sandbox applies a value in different units to a live sample so you can see how big each one actually renders in context.
Seeing the units side by side, at your chosen base and viewport, builds intuition that a static conversion table cannot. Experiment with the values, understand how each behaves, and use the one that fits your responsive intent.
Units, previewed
rem resolves against the root font size while em compounds from the parent, which is why nested em values drift. The sandbox renders each live in your browser.
Frequently Asked Questions
What does the css unit sandbox do?
It generates CSS from the options you choose and previews the result directly in your browser.
Can I use the CSS in production?
Yes. Copy the generated CSS as a starting point, then review naming, browser support, and design-system fit before shipping.
Does this upload my design values?
No. The generator runs locally in your browser and does not send your input to a server.
Is this free?
Yes. It is a free browser utility with no account required.
Practical utilities for front-end design and implementation work.