w3docs logo

CSS zoom Property

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

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

Example of the zoom property:

<!DOCTYPE html>
    <title>Title of the document</title>
      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;
    <h2>Zoom property example</h2>
    <div id="grey" class="element"></div>
    <div id="blue" class="element"></div>
    <div id="green" class="element"></div>


CSS zoom description table


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.

Browser support

chrome edge firefox safari opera
4.0+ 12.0+ 4.0+ 15.0+

Practice Your Knowledge

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

Do you find this helpful?