Zoom Property
Last updated: 2026-09-13
zoom Zoom Property
The zoom property applies a non-standard scaling transform, enlarging or shrinking an element and all of its children proportionally. Unlike transform: scale(), zoom affects the element's layout space — it occupies the scaled actual space — and triggers a full reflow. Although it is not standard CSS, browser support is widespread.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
zoom: normal | reset | <number> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | reset | Keyword | Preset values |
<number> | <percentage> | Type | The zoom factor |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| zoom | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Warning： zoom is non-standard and not in the CSS specification. Firefox does not support it (old versions not at all; newer versions only behind the layout.css.zoom.enabled flag).
Tip： For a standard, well-supported scaling effect, use transform: scale(); zoom suits quick prototypes or internal projects.
❓ FAQ
QWhat is the difference between the zoom property and transform: scale()?
Azoom changes the element's actual occupied space and layout size in the document flow, affecting surrounding elements — equivalent to reflowing. transform: scale() only changes the visual size and keeps the layout space. zoom's scaling also affects the rendered size of children (overall pixel enlargement) and triggers a full reflow. For cross-browser consistency, transform: scale() is more reliable.
QWhat does the reset value of the zoom property actually mean in CSS?
Areset is a non-standard value introduced by Safari, meaning reset the zoom, equivalent to zoom: 1 but preventing an inherited zoom value from continuing to affect the element. The default normal means the zoom matches the page zoom set by the user (equivalent to 1). reset has limited use cases and its support is mostly in WebKit engines — test across browsers.
QHow well is the zoom property supported and does Firefox support it?
Azoom was historically a non-standard IE/WebKit property; Chrome, Edge, and Safari support it well. Firefox only enabled it by default in version 126 (2024). Although it is starting to enter the CSS Viewport specification, it remains a de facto standard. For cross-browser scaling in production, prefer the standard transform: scale().
QDoes the CSS zoom property affect rendering performance on the page?
AYes. zoom changes layout dimensions, so scaling triggers reflow and repaint, and animation performance is clearly worse than transform: scale(). zoom suits one-off scaling of a page or component (like scaling the whole layout to fit), not frame-by-frame animation. For animated scaling, prefer transform: scale(); use zoom when you genuinely need a real layout-size change.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
