Loading…

How to use CSS Units Ref

Browse each CSS unit to see its category and meaning, with a preview showing how a sample element renders so you can choose the right unit for your layout.

Frequently asked questions

What is the difference between em and rem?

em is relative to the current element's font size, while rem is relative to the root element, making rem more predictable for global sizing.

When should I use viewport units?

vw and vh size elements relative to the viewport, ideal for full-screen sections and fluid typography that scales with the window.

Are px units still recommended?

Yes for fine details like borders, but relative units like rem improve accessibility because they respect the user's font-size settings.

More Developer Tools

Git Cheatsheet
Interactive Git command guide.
Linux Commands Ref
Search Linux commands + examples.
Regex Cheatsheet
Regex patterns with live test.
HTTP Headers Ref
Common request/response headers.
Color Names Ref
CSS named colors palette.
Lorem Ipsum Advanced
Words/sentences/paragraphs generator.
Hash Generator Advanced
MD5/SHA1/SHA256/SHA512 side-by-side.
Color Gradient CSS
Linear/radial/conic gradient generator.
Box Shadow Generator
Live CSS box-shadow preview.
Text Shadow Generator
Live CSS text-shadow preview.
Border Radius Generator
Independent corner radius controls.
Flexbox Generator
Visual flex layout + CSS code.

← View all Developer ToolsBrowse all 1,100+ tools →