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: unset;



Render this element at its normal size.
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. Only supported by WebKit (and possibly Blink).
Zoom factor. 100% is equivalent to normal. Values larger than 100% zoom in. Values smaller than 100% zoom out.
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

Initial value normal
Applies to all elements
Inherited no
Computed value as specified
Animation type an integer

Formal syntax

normal | reset | <number> | <percentage>


First example


<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>


p.small {
  zoom: 75%;
p.normal {
  zoom: normal;
p.big {
  zoom: 2.5;
p {
  display: inline-block;
p:hover {
  zoom: reset;


Second example


<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>


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;



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 compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
zoom 1 12 No
See bug 390936.
5.5 15 3.1
The reset value 1 — 59 No No No 15 — 46 3.1
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
zoom ≤37 18 No
See bug 390936.
14 3 1.0
The reset value ≤37 — 59 18 — 59 No 14 — 43 3 1.0 — 7.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.