Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. The non-standard zoom CSS property can be used to
control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element. /* Keyword values */
zoom: normal;
zoom: reset;
/* <percentage> values */
zoom: 50%;
zoom: 200%;
/* <number> values */
zoom: 1.1;
zoom: 0.7;
/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;
normal Render this element at its normal size.Syntax
Values
Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing Ctrl - - or Ctrl + + keyboard shortcuts) to the document. Do not use this value, use the standard unset value instead.
<percentage>Zoom factor. 100% is equivalent to normal. Values larger than 100% zoom in. Values smaller than 100% zoom out.
<number>Zoom factor. Equivalent to the corresponding percentage (1.0 = 100% = normal). Values larger than 1.0 zoom in. Values smaller than 1.0 zoom out.
Formal definition
Formal syntax
zoom = normal | reset | <number> | <percentage>
Examples
First example
HTML
<p class="small">Small</p> <p class="normal">Normal</p> <p class="big">Big</p>
CSS
body { display: flex; align-items: center; justify-content: space-around; height: 100vh; }
.small { zoom: 75%; } .normal { zoom: normal; } .big { zoom: 2.5; } p:hover { zoom: unset; }
Result
Second example
HTML
<div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div>
CSS
div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: center; vertical-align: middle; display: inline-block; zoom: 1.5; } div#a { background-color: gold; zoom: normal; } div#b { background-color: green; zoom: 200%; } div#c { background-color: blue; zoom: 2.9; }
Result
Specifications
Not part of any standard. This property originated in Internet Explorer. Apple has a description in the Safari CSS Reference. Rossen Atanassov of Microsoft has an unofficial draft specification proposal on GitHub.
Browser compatibility
BCD tables only load in the browser