CSS zoom Property
Example
Use the zoom property on text:
p.a {
zoom: normal;
}
p.b {
zoom: 150%;
}
p.c {
zoom: 0.6;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The zoom property specifies the zoom factor
for an element. An element can be zoomed in and out.
| Default value: | normal |
|---|---|
| Inherited: | no |
| Animatable: | Yes. Read about animatable |
| Version: | CSS Viewport Module Level 1 |
| JavaScript syntax: | object.style.zoom = "3" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| zoom | 1 | 12 | 126 | 3.1 | 15.0 |
CSS Syntax
zoom: normal|%|number|unset|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| normal | Default value. The element is rendered as normal | Demo ❯ |
| % | Specifies the zoom factor in percent. 100% = normal. To zoom in, use values larger than 100%. To zoom out, use values smaller than 100% | Demo ❯ |
| number | Specifies the zoom factor as a number percent. 1.0 = normal. To zoom in, use values larger than 1.0 To zoom out, use values smaller than 1.0 | Demo ❯ |
| unset | Unsets the zoom factor (goes back to normal) | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Use the zoom property to resize an element:
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 »
