CSS Unit Converter
Convert between px, rem, em, vw, vh, and other CSS units
Settings & input
Quick presets & examples
Your inputs are never uploaded or stored.
Results
Enter your values to see the results.
Reference & calculation details
About the Free CSS Unit Converter
The CSS Unit Converter shows a length in every major CSS unit at once, so a value from a design file can go straight into your stylesheet. For converting pixels to rem, em to percentages, or viewport units to absolute measurements, this tool provides accurate, real-time conversions across 10 different CSS units simultaneously.
Understanding and correctly using CSS units is fundamental to building responsive, accessible websites. Relative units like rem and em scale with font size settings, making your layouts adapt to user preferences and accessibility needs. Viewport units (vw, vh) create fluid designs that respond to screen size. Absolute units (px, pt, cm, mm, in) provide fixed measurements for precise control when needed.
This CSS unit conversion tool goes beyond simple calculators by letting you customize the base font size for rem/em/% calculations and set viewport dimensions for vw/vh conversions. All 10 unit results are displayed in a clear grid layout with one-click copy and instant unit swapping, making it the fastest way to find the right CSS value for any design context.
Key Features
- Convert between 10 CSS units: px, rem, em, %, vw, vh, pt, cm, mm, and in
- All conversions displayed simultaneously in a responsive grid layout
- Customizable base font size for accurate rem, em, and percentage calculations
- Configurable viewport width and height for precise vw and vh conversions
- One-click copy-to-clipboard with unit suffix included
- Instant unit swapping to set any converted value as the new source
- Quick presets for common values like 1rem, 100vw, 50%, and standard font sizes
- Unit descriptions showing what each CSS unit represents
- Smart number formatting with appropriate decimal precision
- Dark mode support for comfortable use in any coding environment
How to Use the CSS Unit Converter
- Enter a value: Type the numeric value you want to convert into the input field at the top of the tool.
- Select the source unit: Choose the CSS unit of your input value from the dropdown menu (px, rem, em, %, vw, vh, pt, cm, mm, or in).
- Adjust settings if needed: Customize the base font size (default 16px) and viewport dimensions (default 1920x1080) to match your project's configuration.
- View all conversions: All 10 unit conversions are displayed instantly in the grid below. The source unit is highlighted in blue for easy identification.
- Copy or swap: Click the copy icon to copy any converted value with its unit suffix, or click the swap icon to set that value as the new source for further conversions.
Use Cases
- Responsive design: Convert pixel-based designs from Figma or Sketch into rem and em units for scalable, accessible CSS layouts.
- Accessibility compliance: Switch from fixed px values to relative rem/em units so your layouts respect user font size preferences and WCAG guidelines.
- Viewport-based layouts: Calculate exact vw and vh values for full-screen sections, responsive typography, and fluid spacing.
- Print stylesheet creation: Convert screen units to print-friendly pt, cm, mm, and in values for CSS @media print stylesheets.
- Design system development: Establish consistent spacing and typography scales by converting between unit systems across your design tokens.
- CSS framework migration: Convert between unit systems when migrating from one CSS framework or methodology to another.
- Cross-platform development: Ensure consistent sizing across web, mobile web, and hybrid app development by converting between platform-specific units.
Frequently Asked Questions
Why do I need to set a base font size?
Relative units like rem, em, and % depend on a reference font size. Most browsers default to 16px, but your project may use a different base. Setting the correct base font size ensures accurate conversions for your specific project configuration.
What is the difference between rem and em?
Both rem and em are relative to font size, but rem is always relative to the root element (html) font size, while em is relative to the parent element's font size. In this converter, both use the base font size setting since the specific DOM context is not available.
How are viewport units calculated?
1vw equals 1% of the viewport width, and 1vh equals 1% of the viewport height. The converter uses the viewport dimensions you set (default 1920x1080) to calculate these values. Adjust the settings to match your target screen size for accurate results.
How does the px to pt conversion work?
The conversion uses the standard ratio of 96 CSS pixels per inch and 72 points per inch. Therefore, 1pt equals approximately 1.333px (96/72). This ratio is consistent across all modern browsers and operating systems.
Tips & Best Practices
- Use rem for typography: Set your base font size on the html element and use rem units for all text sizing to ensure consistent, accessible typography across your site.
- Prefer relative units: Use rem, em, and % for spacing and layout to create designs that adapt to user preferences and different screen sizes.
- Match your project settings: Always set the base font size and viewport dimensions in the converter to match your actual project configuration for accurate results.
- Use viewport units sparingly: While vw and vh are powerful for fluid layouts, they can cause issues on mobile browsers where the viewport size changes with scroll. Consider using CSS clamp() for more robust responsive values.
- Test across devices: After converting units, test your CSS on multiple devices and screen sizes to verify the values produce the desired visual result.
- Bookmark common conversions: Use the quick presets for frequently needed values like 1rem, standard font sizes, and common viewport calculations to speed up your workflow.