CSS zoom Property

The zoom property is used to scale the content. The transform property has a "scale()" value which can also be used to scale the content instead of the zoom property.

The zoom property is non-standard and is implemented only in the Internet Explorer.

For maximum browser compatibility extension such as -ms- for Internet Explorer is used with this property.

Initial Value normal
Applies to All elements.
Inherited No.
Animatable Yes.
Version Safari CSS Reference.
DOM Syntax object.style.zoom = "4";


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


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


Value Description
normal Specifies the normal size of the element.
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.
percentage Specifies a value in percentage.100% is equivalent to normal.
reset Do not magnify the element if the user applies non-pinch-based zooming to the document.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Related articles