How to Use Scale in CSS: Simple Guide with Examples

Use the CSS transform: scale() property to resize elements by a factor. The scale function takes one or two numbers to grow or shrink an element horizontally and vertically.

Syntax

The scale() function is used inside the transform property. It accepts one or two numbers:

• scale(sx): scales both width and height by sx.
• scale(sx, sy): scales width by sx and height by sy.

Values greater than 1 make the element bigger; values between 0 and 1 make it smaller.

css

transform: scale(1.5);
transform: scale(1.2, 0.8);

Example

This example shows a square that grows to 1.5 times its size when hovered over using scale(1.5). It demonstrates how scale changes the element size smoothly.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  transition: transform 0.3s ease;
}
.box:hover {
  transform: scale(1.5);
}

Output

A green square in the center of the page that smoothly grows 1.5 times bigger when you hover the mouse over it.

Common Pitfalls

Common mistakes when using scale() include:

• Not using transform-origin, which can cause scaling from an unexpected point.
• Forgetting to add transition for smooth animation.
• Using scale values of 0 or negative numbers, which can hide or flip the element unexpectedly.

Always test how scaling affects layout and interaction.

css

/* Wrong: scales from top-left by default, no smooth transition */
.box:hover {
  transform: scale(2);
}

/* Right: scales from center with smooth transition */
.box {
  transition: transform 0.3s ease;
  transform-origin: center;
}
.box:hover {
  transform: scale(2);
}

Quick Reference

Property	Description	Example
transform: scale(sx)	Scales width and height by sx	transform: scale(1.2);
transform: scale(sx, sy)	Scales width by sx and height by sy	transform: scale(1, 0.5);
transform-origin	Sets the point from which scaling happens	transform-origin: center;
transition	Smoothly animates scaling changes	transition: transform 0.3s ease;

Key Takeaways

Use transform: scale() to resize elements by a factor.

Provide one value to scale both width and height equally, or two values to scale separately.

Add transition for smooth scaling animations.

Set transform-origin to control the scaling anchor point.

Avoid scale values of 0 or negative numbers to prevent hiding or flipping elements.