CSS zoom property

Definition and Usage

zoom The attribute specifies the zoom scale of the element. The element can be enlarged or shrunk.

Instance

Example 1

For Text Use zoom Attribute:

p.a {
  zoom: normal;
}
p.b {
  zoom: 150%;
}
p.c {
  zoom: 0.6;
}

Try It Yourself

Example 2

Using zoom Attribute Adjustment of Element Size:

div {
  border-radius: 100%;
  background: #73AD21;
  padding: 20px;
  width: 80px;
  height: 80px;
}
div.a {
  zoom: normal;
}
div.b {
  zoom: 150%;
}
div.c {
  zoom: 0.6;
}

Try It Yourself

CSS Syntax

zoom: normal|%|number|unset|initial|inherit;

Attribute Value

Value Description
normal Default Value. The element is rendered in a normal manner.
%

Specify the zoom scale in percentage.

100% = Normal.

To enlarge, use a value greater than 100%.

To shrink, use a value less than 100%.
number

Specify the zoom scale in numeric form (percentage).

1.0 = Normal.

To enlarge, use a value greater than 1.0.

To shrink, use a value less than 1.0.
unset Unsets the zoom scale (resets to normal).
initial Sets this property to its default value. Refer to initial.
inherit Inherits this property from its parent element. Refer to inherit.

Technical Details

Default Value: normal
Inheritance: No
Animation Production: Supported. Refer to:Animation-related properties.
Version: CSS Viewport Module Level 1
JavaScript Syntax: object.style.zoom = "3"

Browser Support

The numbers in the table indicate the browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
1 12 126 3.1 15.0