W3docs
en
Log in

CSS zoom Property

CSS zoom Property is used to scale the elements of your website. This property is non-standard and is supported by only some browsers including.

The zoom property is used to scale the content. For scaling the content, you can also use the transform property set to scale().

Note

Unlike transform: scale(), which only affects the paint layer, zoom scales both the layout and the paint. This means elements with zoom will affect the document flow and surrounding elements, while transform does not.

Warning

This feature is non-standard and it is not recommended to use it for production sites, because it is not supported by Firefox. Therefore, you can use transform: scale() to change a site element’s size.

Initial Valuenormal
Applies toAll elements.
InheritedNo.
AnimatableYes.
VersionNon-standard
DOM Syntaxobject.style.zoom = "4";

Syntax

CSS zoom values

zoom: normal | number | percentage | reset | initial | inherit;

Example of the zoom property:

CSS zoom code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.element {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        zoom: 2;
      }
      div#grey {
        background-color: #666;
        zoom: normal;
      }
      div#blue {
        background-color: #1c87c9;
        zoom: 300%;
      }
      div#green {
        background-color: #8ebf42;
        zoom: 5;
      }
    </style>
  </head>
  <body>
    <h2>Zoom property example</h2>
    <div id="grey" class="element"></div>
    <div id="blue" class="element"></div>
    <div id="green" class="element"></div>
  </body>
</html>
Try it Yourself »

Result

CSS zoom description table

The image shows three circles scaled by different factors: the grey circle uses normal (1x), the blue circle uses 300% (3x), and the green circle uses 5 (5x). Notice how the larger circles push the surrounding layout outward, demonstrating zoom's layout-scaling behavior.

Values

ValueDescription
normalSpecifies the normal size of the element.
numberZoom factor. Equivalent to the corresponding percentage (1.0 = 100% = normal). Values larger than 1.0 zoom in. Values smaller than 1.0 zoom out.
percentageSpecifies a value in percentage. 100% is equivalent to normal.
resetDo not magnify the element if the user applies non-pinch-based zooming to the document.
initialMakes the property use its default value.
inheritInherits the property from its parents element.

Practice

Practice

___ property should be used instead of this property, if possible.