CSS scale Property

The scale property controls the visual scaling of an element along one or more axes, changing its rendered size without altering its computed layout dimensions in the normal flow. Unlike changing width or height, applying scale adjusts the element’s coordinate system and the way it is painted - its children, borders and backgrounds are scaled together - while the surrounding layout typically remains as if the original size were unchanged. This makes scale particularly useful for visual effects, for temporarily enlarging or shrinking interface elements, and for performant animations where you want to avoid reflow.

Scaling can be uniform or non‑uniform and can operate in two or three dimensions; a uniform scale keeps all axes proportional, whereas a non‑uniform scale stretches or squashes an element along specific axes. Because scaling manipulates the element’s rendering transform, it interacts with the element’s transform origin (the point around which the scale is applied) and with any other transform operations that may be in effect. For the broader transform model and how multiple transform functions combine, see transform. To control the pivot for the transformation, see transform-origin.

When animating size changes, using scale is often preferable to animating layout properties because it avoids layout recalculation and can be GPU-accelerated, improving smoothness and reducing jank. For smooth state transitions where elements grow or shrink in response to interaction, scale pairs naturally with timing controls and easing functions provided by CSS animation systems; for guidance on animating property changes, see transition. Keep in mind visual considerations such as pixel sampling and stroke scaling: text and thin strokes may become blurred or thicker/thinner when scaled, so consider separate strategies (like changing font size or stroke width) when crispness is critical.

Finally, because scaling only affects the rendering layer, it can change hit-testing and the element’s visual overflow without changing how sibling elements are laid out. That can be leveraged to create overlays, popovers, or interactive feedback where the scaled element appears larger but does not push other content away. Also be aware that combining scaled transforms with other effects (perspective, 3D transforms, or complex stacking contexts) can change perceived depth and interaction, so test interactions and composition in context.