Web/CSS/zoom

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

Syntax

Values

normal

Render this element at its normal size.

reset '

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).

<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

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

Formal syntax

normal | reset | <number> | <percentage>

Examples

First example

HTML

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

CSS

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

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;
}

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

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
zoom Non-standard'	Chrome Full support 1	Edge Full support 12	Firefox No support No Notes' No support No Notes' Notes' See bug 390936.	IE Full support 5.5	Opera Full support 15	Safari Full support 3.1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android No support No Notes' No support No Notes' Notes' See bug 390936.	Opera Android Full support 14	Safari iOS Full support 3	Samsung Internet Android Full support 1.0
The reset value Non-standard'	Chrome No support 1 — 59	Edge No support No	Firefox No support No	IE No support No	Opera No support 15 — 46	Safari Full support 3.1	WebView Android No support ≤37 — 59	Chrome Android No support 18 — 59	Firefox Android No support No	Opera Android No support 14 — 43	Safari iOS Full support 3	Samsung Internet Android No support 1.0 — 7.0

Legend

Full support  

Full support

No support  

No support

Non-standard. Expect poor cross-browser support.'

Non-standard. Expect poor cross-browser support.

See implementation notes.'

See implementation notes.

See also

• zoom entry in CSS-Tricks' CSS Almanac
• The zoom viewport descriptor, for use with @viewport
• Bug 390936: Implement Internet Explorer zoom property for CSS on the Firefox issue tracker Bugzilla

zoom by Mozilla Contributors is licensed under CC-BY-SA 2.5.