Skip to content

How to make an element smaller or bigger with CSS

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

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).

→ Get my CSS Handbook
→ Read my CSS Tutorial
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)