zoom
The zoom CSS property can be used to control the magnification level of an element. transform: scale() can be used as an alternative to this property.
The zoom CSS property scales the targeted element, which can affect the page layout. When scaling, the zoomed element scales from top and center when using the default writing-mode.
In contrast, an element scaled using scale() will not cause layout recalculation or move other elements on the page. If using scale() makes the contents larger than the containing element, then overflow comes into effect. Additionally, elements adjusted using scale() transform from the center by default; this can be changed with the transform-origin CSS property.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 126 | 3.1 | 18 | 3 | |
- Before Firefox 131, SVG elements are not zoomed properly. See bug 1905023 and bug 878346.
Syntax
.zoomed {
zoom: 1.5; /* Enlarge to 150% */
}
.small {
zoom: 0.75; /* Reduce to 75% */
}Live demo
Use cases
-
Browser-native behavior
Use zoom to rely on the platform for behavior that would otherwise require extra code or CSS complexity.
-
Progressive enhancement
Enhance the experience where support exists while keeping a solid baseline elsewhere.
Cautions
- Check browser support and actual product need before adding a new platform feature widely.
- Keep feature usage understandable so future contributors know why it was chosen.
Accessibility
- New platform features should still preserve readable defaults and robust interaction patterns.
- Verify that enhancement paths do not leave unsupported environments with a broken experience.