Skip to content

How to make an element smaller or bigger with CSS

Sometimes you might have the need, especially when designing a page, to scale an item so it looks smaller, or bigger.

You can use the CSS zoom property to scale any HTML element.

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

Note that it does not work in Firefox, you could use -moz-transform: scale(NUMBER); instead (and if you go that route, you can use transform: scale(NUMBER); on all browsers, too).


→ Here's my latest YouTube video

→ Get my CSS Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list