How to make an element smaller or bigger with CSS

You can make any HTML element bigger or smaller with the CSS zoom property. A value below 1 shrinks the element, a value above 1 grows it.

Sometimes you have this need when designing a page. Maybe an embedded widget comes in too big, or a card component needs to appear at half size in a preview.

How to use zoom

Use a value < 1 to make an element smaller. For example, half the size with 0.5:

div {
  zoom: 0.5;
}

or use a value > 1 to make the element bigger, like in this case to scale it 2x:

div {
  zoom: 2;
}

You can also use percentages, which read a bit more naturally:

div {
  zoom: 150%;
}

zoom: 150% and zoom: 1.5 do the same thing.

What about transform: scale()?

CSS gives you another way to resize an element:

div {
  transform: scale(0.5);
}

The visual result looks similar, but there’s a big difference in how the two affect layout.

zoom changes the size the element occupies on the page. Shrink an element with zoom: 0.5 and the content around it moves up to fill the space.

transform: scale() is applied after layout. The element is drawn smaller, but the page still reserves its original space. You end up with an empty gap around the shrunk element.

So pick based on what you want: zoom when the layout should reflow, transform: scale() when it shouldn’t.

Browser support

For years zoom was a non-standard property that came from old Internet Explorer. It worked in Chrome and Safari, but not in Firefox, and using it felt like a hack.

That changed. The property got standardized, and Firefox added support in version 126, released in 2024. Today you can use zoom in all major browsers.

Be careful if you need to support older Firefox versions though. There, zoom is ignored and the element renders at full size. If that’s a concern, use transform: scale() instead, and account for the reserved space it leaves in the layout.