CSS Tools
Free online CSS and design tools for developers and designers. Convert between px, rem, em, inches, and more — all running 100% in your browser.
CSS tooling for the moments when you're bouncing between a pixel-based Figma spec, a rem-based design system, and a CMYK print proof all in the same project. Px to Rem Converter handles the `÷ 16` arithmetic with a configurable base font size and a reference table for the common sizes (14, 16, 18, 20, 24, 32) you'll reuse across a stylesheet. Pixels to Inches goes from screen to physical measurement, essential for web-to-print workflows — a 600 px image at 300 DPI is exactly 2 inches wide, enough for a crisp business card but not a poster. Both tools include swap modes so you can work in either direction without reloading.
Pixels to Inches Converter
Convert pixels to inches, centimeters, millimeters, and points at any DPI. Includes inches to pixels conversion and a precomputed reference table.
Px to Rem Converter
Convert between px, rem, and em CSS units with a configurable base font size. Includes a reference table for common conversions and one-click copy.
Px to Rem Converter
Convert pixels to rem (and back) with a configurable root font size, copy-ready Tailwind class output, and a quick reference table of the most common front-end sizes.
Em to Px Converter
Convert em to px (and back) with explicit parent font size context and a compounding visualizer that shows how em multiplies through nested elements — so you don't get burned by the rem-vs-em confusion.
Aspect Ratio Calculator
Calculate aspect ratios from dimensions, derive missing dimensions from a ratio + one side, and resize images proportionally. Includes 7 common-ratio presets, decimal output, and the modern CSS aspect-ratio property value.
The CSS Tools Guide
Pixels, rem, and em: which to use where
Rem is the default for font sizes because it respects user accessibility preferences — if someone sets their browser default to 18px for readability, rem-based text scales proportionally while px-based text stays fixed. Use rem for typography, spacing, and component sizing. Use px for borders, outlines, box-shadow offsets, and micro-adjustments where a fraction of a pixel would blur. Use em only for component-internal scaling where you want text to grow with the parent (e.g., button padding that scales with font size). Em compounds in nested elements — a 1.2em inside another 1.2em is 1.44× the grandparent — so avoid it for global layout. The 62.5% root trick (`html { font-size: 62.5% }`) makes 1rem = 10px, giving cleaner decimals in your CSS if you dislike 0.875rem.
DPI math for designers handling print
A pixel has no fixed physical size — its real-world dimension depends on the DPI of the output. Screen-web is typically 72-96 DPI, medium-quality photo prints are 150 DPI, and professional magazine print is 300 DPI. The formula: inches = pixels ÷ DPI. So a 1920×1080 screen image is 20×11.25 inches at 96 DPI (correct for monitor display) but only 6.4×3.6 inches at 300 DPI (correct if you want to print it without visible fuzz). The Pixels to Inches Converter handles all four physical units — inches, cm, mm, and typographic points — plus reverse conversion so you can compute "I need an 8.5×11 inch page at 300 DPI, what's my pixel size?" (2550×3300).
Responsive design and accessibility
Media queries traditionally use em for breakpoints (e.g., `@media (min-width: 48em)`) because em respects user font-size settings — a user with enlarged defaults hits mobile breakpoints at a "larger" viewport size, which is usually what they want. WCAG guidelines recommend a minimum 16px (1rem) body font for comfortable reading, and 1.5× line-height for body copy. Use the converter to translate Figma's pixel specs into accessible rem values, and double-check that clickable targets are at least 44×44 pixels (the WCAG AA touch target minimum). For complex layouts where scaling matters, lean on CSS custom properties (`--space-md: 1rem`) so you can tune a single value and have everything else adjust.