A dynamic CSS unit converter that converts values between different CSS units with instant feedback and a minimalist UI.
- Dynamic Conversion: Convert between px, rem, em, vw, vh, %, and pt
- Instant Feedback: Real-time conversion as you type
- Configurable Settings:
- Root Font Size (for rem calculations)
- Viewport Width (for vw calculations)
- Viewport Height (for vh calculations)
- Parent Font Size (for em and % calculations)
- All Conversions View: See your input value converted to all supported units at once
- Minimalist UI: Clean, modern interface with gradient design
- Responsive: Works on desktop and mobile devices
- px (pixels): Absolute unit
- rem (root em): Relative to root font size
- em: Relative to parent font size
- vw (viewport width): Percentage of viewport width
- vh (viewport height): Percentage of viewport height
- % (percent): Relative to parent font size
- pt (points): Absolute unit (1pt = 4/3px)
Simply open index.html in your web browser. No build process or dependencies required!
- Enter a value in the "Value" field
- Select the unit you're converting from
- Select the unit you want to convert to
- See instant results in the result panel and all conversions table
Adjust the settings at the top to match your design requirements:
- Root Font Size: Default is 16px (browser default)
- Viewport Width: Auto-detected from your browser window
- Viewport Height: Auto-detected from your browser window
- Parent Font Size: Default is 16px
The converter automatically updates all conversions when you change any setting.
The converter uses a two-step conversion process:
- Convert the input value to pixels (base unit)
- Convert pixels to the target unit
This ensures accurate conversions between any two units, taking into account the configured root font size, viewport dimensions, and parent font size.
MIT License - See LICENSE file for details