CSS scale Property

The scale property allows you to resize an element along the X, Y, and Z axes independently without affecting the surrounding page layout.

selector { scale: 1.5; }
none Specifies that no scaling transformation should be applied.
<number> A unitless multiplier where 1 is the original size, 2 is double the size, and 0.5 is half the size.
<percentage> A percentage value where 100% represents the original size of the element.

Code Examples

This basic example creates a box that smoothly grows by 20% when the user hovers over it using a simple CSS transition.

<style>
.box {
  width: 100px;
  height: 100px;
  background: #ff8c00;
  transition: scale 0.3s ease-in-out;
  scale: 1;
}
.box:hover {
  scale: 1.2;
}
</style>
<div class="box"></div>

This advanced example uses JavaScript to dynamically update the scale of a UI component when a user clicks a button, demonstrating programmatic control.

<div id="ui-card" style="width: 200px; padding: 20px; background: #333333; color: #ffffff; text-align: center; border-radius: 8px; transition: 0.4s;">
  <p>Interactive Card</p>
  <button onclick="zoomIn()">Zoom In</button>
  <button onclick="resetZoom()">Reset</button>
</div>

<script>
const card = document.getElementById("ui-card");
const highlightColor = "#00ff00";

function zoomIn() {
  card.style.scale = "1.5";
  card.style.borderColor = highlightColor;
  card.style.borderStyle = "solid";
}

function resetZoom() {
  card.style.scale = "1";
  card.style.borderColor = "transparent";
}
</script>

Pro Tip

You can use negative values to flip an element. Setting scale: -1 1; will flip your element horizontally like a mirror image, which is a quick way to reuse graphics or icons that need to face the opposite direction. Also, remember that since this is an individual property, you can animate it in CSS transitions or keyframes without needing to re-declare your rotate or translate values.

Deep Dive

Think of the scale property like a magnifying glass or a shrink ray. In the past, we had to use the transform property and the scale() function, which was a bit clunky if you wanted to change only the size while keeping a rotation. Now, scale is its own property. It effectively multiplies the pixels of an element. If you set it to 2, you are essentially telling the browser to render that element at 200% of its computed size. By default, it scales from the center point of the element, which is the transform-origin. You can provide one value for uniform scaling, two values for independent X and Y scaling, or three values if you are working in 3D space with the Z-axis. Because it does not trigger a reflow of the document, it is extremely efficient for the GPU to handle.

Best Practices

Use the scale property for UI interactions like hover states or focus states where you want an element to pop out at the user. It is much better for performance than changing the width and height properties because changing width and height forces the browser to recalculate the position of every other element on the page. Use scale when you want a smooth, high-frame-rate animation.

Common Pitfalls

A major trap is forgetting that scaling an element does not change the physical space it occupies in the document flow. If you scale an image to be three times its size, it might overlap and hide the text or buttons sitting next to it. Also, be careful with bitmap images; scaling them up past their original resolution will make them look blurry or pixelated, much like blowing up a small photo too large on a printer.

Accessibility

Avoid scaling down text to the point where it becomes unreadable for users with visual impairments. If you are using scale as part of an animation, ensure you respect the user's system settings for reduced motion. Fast or dramatic pulsing scales can cause issues for people with vestibular disorders who are sensitive to motion on the screen.

Dev Data Table: scale property

default none
animatable yes
inherited no
experimental no
year_intro 2015
year_standard 2022
js_syntax_1 element.style.scale = "2";
js_syntax_2 element.style.setProperty("scale", "2");
js_note When manipulating scale via JavaScript, use string values for numbers or percentages, and remember that individual transform properties like this are often more performant than concatenating a full transform string.
browsers { "Chrome": 104, "Edge": 104, "Firefox": 103, "Safari": 15.4, "Opera": 90, "Chrome Android": 104, "Safari on iOS": 15.4, "Samsung Internet": 20, "Opera Mobile": 71 }
results render here...