Viewport Unit Calculator
Convert between pixels and viewport units instantly.
Supports vw, vh, vmin, vmax, and the new svh, lvh, dvh units.
Viewport Unit Equivalents
5.2083vw1% of viewport width
9.2593vh1% of viewport height
9.2593vmin1% of smaller dimension
5.2083vmax1% of larger dimension
9.2593svh1% of small viewport height
9.2593lvh1% of large viewport height
9.2593dvh1% of dynamic viewport height
Live Preview
A 100px box at viewport 1920x1080
Quick Reference (at 1920x1080)
Understanding Viewport Units
Viewport units are CSS units relative to the browser viewport dimensions. They're essential for responsive design, allowing elements to scale with the screen size.
Classic Viewport Units
vwViewport Width
1vw = 1% of the viewport width. 50vw means 50% of the viewport width.
vhViewport Height
1vh = 1% of the viewport height. 100vh is the full viewport height.
vminViewport Minimum
1vmin = 1% of the smaller dimension (width or height). Great for square elements that scale.
vmaxViewport Maximum
1vmax = 1% of the larger dimension (width or height). Useful when you want to reference the larger axis.
New Viewport Units (CSS Level 4)
Mobile browsers have dynamic UI elements (address bar, navigation bar) that can show or hide. These new units address the "100vh problem" where 100vh doesn't always mean the visible viewport height on mobile.
svhSmall Viewport Height
1svh = 1% of the smallest possible viewport height. On mobile, this is when all browser UI is visible. Use for elements that must always be visible without scrolling.
lvhLarge Viewport Height
1lvh = 1% of the largest possible viewport height. On mobile, this is when browser UI is hidden. Use for full-screen elements that can overflow initially.
dvhDynamic Viewport Height
1dvh = 1% of the current viewport height. Changes as browser UI shows/hides. Most flexible but can cause layout shifts. Best for sticky headers or modals.
Browser Support
The new units (svh, lvh, dvh, svw, lvw, dvw, svi, lvi, dvi, svb, lvb, dvb) are supported in all modern browsers since 2023. For older browsers, provide fallbacks usingvh or JavaScript solutions.
Common Use Cases
Full-screen hero section
height: 100svh; /* or 100dvh */Responsive font sizes
font-size: clamp(1rem, 2vw, 2rem);Square element
width: 50vmin; height: 50vmin;Modal overlay
height: 100dvh; /* dynamic */Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Blend Mode Generator
Mix colors with blend modes
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
CSS Button Generator
Design buttons with hover effects
CSS Glow Generator
Create neon glow effects
Fluid Typography
Scale text across screen sizes