`zoom` CSS property

Baseline 2024

Newly available

Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

See full compatibility

The zoom CSS property can be used to control the magnification level of an element. transform: scale() can be used as an alternative to this property.

The zoom CSS property scales the targeted element, which can affect the page layout. When scaling, the zoomed element scales from top and center when using the default writing-mode.

In contrast, an element scaled using scale() will not cause layout recalculation or move other elements on the page. If using scale() makes the contents larger than the containing element, then overflow comes into effect. Additionally, elements adjusted using scale() transform from the center by default; this can be changed with the transform-origin CSS property.

Syntax

css

/* <percentage> values */
zoom: 50%;
zoom: 200%;

/* <number> values */
zoom: 1.1;
zoom: 0.7;

/* Non-standard keyword values */
zoom: normal;
zoom: reset;

/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;

Values

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

Two non-standard keyword values are not recommended. Check browser compatibility data:

normal: Render the element at its normal size; equal to zoom: 1. Use the global unset keyword value instead.
reset: Resets the value to zoom: 1 and prevents the element from being (de)magnified if the user applies non-pinch-based zooming (e.g., by pressing Ctrl - - or Ctrl + + keyboard shortcuts) to the document.

Formal definition

Initial value	`1`
Applies to	all elements
Inherited	no
Percentages	Converted to `<number>`
Computed value	as specified, but with `<percentage>` converted to the equivalent `<number>`
Animation type	Not animatable

Formal syntax

zoom = 
  <number [0,∞]>      |
  <percentage [0,∞]>

Examples

Resizing paragraphs

In this example the paragraph elements are zoomed, on hovering a paragraph the zoom value is unset.

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

Resizing elements

In this example the div elements are zoomed using the normal, <percentage>, and <number> values.

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%;
  vertical-align: middle;
  display: inline-block;
}
div#a {
  background-color: gold;
  zoom: normal; /* circle is 25px diameter */
}
div#b {
  background-color: green;
  zoom: 200%; /* circle is 50px diameter */
}
div#c {
  background-color: blue;
  zoom: 2.9; /* circle is 72.5px diameter */
}

Result

Creating a zoom control

In this example a select field is used to change the zoom level of the element.

HTML

In this first block, of HTML, a select field is defined with the different zoom values to be used.

html

<section class="controls">
  <label for="zoom"
    >Zoom level
    <select name="zoom" id="zoom">
      <option value="0.5">Extra Small</option>
      <option value="0.75">Small</option>
      <option value="normal" selected>Normal</option>
      <option value="1.5">Large</option>
      <option value="2">Extra Large</option>
    </select>
  </label>
</section>

In this second block a not supported message is added that will be hidden if the browser supports zoom.

html

<p class="zoom-notice">CSS zoom is not supported</p>

The final block just defines the content that will be zoomed.

html

<section class="content">
  <h1>This is the heading</h1>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
    provident repellat officiis facilis alias facere obcaecati quos sunt
    voluptas! Iste.
  </p>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
    provident repellat officiis facilis alias facere obcaecati quos sunt
    voluptas! Iste.
  </p>
</section>

CSS

In this first block, of CSS, we are setting the starting value for the --zoom-level using custom properties and then using that as the value for zoom on the content block.

css

html {
  --zoom-level: normal;
}
.content {
  max-width: 60ch;
  margin: auto;
  zoom: var(--zoom-level);
}

.controls,
.zoom-notice {
  display: flex;
  justify-content: space-around;
}
.zoom-notice {
  color: red;
}

In this final CSS block we are checking to see if the browser supports zoom and if so setting the not supported message to display: none;.

css

@supports (zoom: 1) {
  .zoom-notice {
    display: none;
  }
}

JavaScript

This JavaScript watches for a change in the select field and sets the new value for --zoom-level on the content section, e.g., style="--zoom-level: 1.5;".

const zoomControl = document.querySelector("#zoom");
const content = document.querySelector(".content");
const updateZoom = () => {
  content.style = `--zoom-level: ${zoomControl.value}`;
};
zoomControl.addEventListener("change", updateZoom);

Result

Specifications

Specification
CSS Viewport Module Level 1 # zoom-property

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`zoom`	Chrome – Full support Chrome 1 (Release date: 2008-12-11) footnote Full support	Edge – Full support Edge 12 (Release date: 2015-07-29) footnote Full support	Firefox – Full support Firefox 126 (Release date: 2024-05-14) footnote footnote Before Firefox 131, SVG elements are not zoomed properly. See bug 1905023 and bug 878346.	Opera – Full support Opera 15 (Release date: 2013-07-02) footnote Full support	Safari – Full support Safari 3.1 (Release date: 2008-03-18) footnote Full support	Chrome Android – Full support Chrome Android 18 (Release date: 2012-06-27) footnote Full support	Firefox for Android – Full support Firefox for Android 126 (Release date: 2024-05-14) footnote footnote Before Firefox for Android 131, SVG elements are not zoomed properly. See bug 1905023 and bug 878346.	Opera Android – Full support Opera Android 14 (Release date: 2013-05-21) footnote Full support	Safari on iOS – Full support Safari on iOS 3 (Release date: 2009-06-17) footnote Full support	Samsung Internet – Full support Samsung Internet 1 (Release date: 2013-04-27) footnote Full support	WebView Android – Full support WebView Android 4.4 (Release date: 2013-12-09) footnote Full support	WebView on iOS – Full support WebView on iOS 3 (Release date: 2009-06-17) footnote Full support
The `reset` value Deprecated Non-standard	Chrome – No support Chrome 1 – 58 (Release date: 2008-12-11) footnote Removed in 59 and later	Edge – No support Edge footnote No support	Firefox – No support Firefox footnote No support	Opera – No support Opera 15 – 45 (Release date: 2013-07-02) footnote Removed in 46 and later	Safari – No support Safari 3.1 – 18.3 (Release date: 2008-03-18) footnote Removed in 18.4 and later	Chrome Android – No support Chrome Android 18 – 58 (Release date: 2012-06-27) footnote Removed in 59 and later	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – No support Opera Android 14 – 42 (Release date: 2013-05-21) footnote Removed in 43 and later	Safari on iOS – No support Safari on iOS 3 – 18.3 (Release date: 2009-06-17) footnote Removed in 18.4 and later	Samsung Internet – No support Samsung Internet 1 – 6.4 (Release date: 2013-04-27) footnote Removed in 7 and later	WebView Android – No support WebView Android 4.4 – 58 (Release date: 2013-12-09) footnote Removed in 59 and later	WebView on iOS – No support WebView on iOS 3 – 18.3 (Release date: 2009-06-17) footnote Removed in 18.4 and later

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: Non-standard. Check cross-browser support before using.
: Deprecated. Not for use in new websites.
: See implementation notes.

zoom CSS property

HTML

CSS

Result

HTML

CSS

Result

HTML

CSS

JavaScript

Result

Legend

`zoom` CSS property