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.

Syntax

css

/* 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;

Values

normal: Render this element at its normal size.
reset Non-standard: 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

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

Formal syntax

zoom =
  normal | reset | <number> | <percentage>

Examples

First example

HTML

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

css

.small {
  zoom: 75%;
}
.normal {
  zoom: normal;
}
.big {
  zoom: 2.5;
}
p:hover {
  zoom: unset;
}

Result

Second example

HTML

html

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

CSS

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