scale() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The scale() CSS function is used to resize elements along the X and Y axes, effectively increasing or decreasing their size without altering the layout of surrounding content. It is a part of the broader transform family of functions, which allows for geometric transformations such as rotation, translation, and skewing. By applying scale(), you can stretch or shrink an element proportionally or independently in either direction.

The function accepts one or two numeric values. A single value scales the element uniformly in both directions, while two values allow independent scaling along the horizontal (X) and vertical (Y) axes. Values greater than 1 enlarge the element, while values between 0 and 1 shrink it. Negative values are possible but result in mirrored transformations along the respective axis.

One common use of scale() is in interactive effects, such as enlarging a button on hover:

button:hover {
  transform: scale(1.2);
}

This increases the button’s size by 20% when hovered, providing a visual cue to users. Another example might involve independent scaling:

div.box {
  transform: scale(1.5, 0.8);
}

Here, the element becomes 50% wider and 20% shorter, which can be useful for creative layouts or animations.

scale() works in conjunction with other transform functions such as rotate() and translate(). It also respects the transition property, allowing smooth animated changes in size.

Additionally, using scale() does not affect the computed width or height of the element, making it ideal for visual effects without disrupting page flow.

Syntax

transform: scale(<numberX> [, <numberY>]?); 

/* the question mark indicates the second value is optional */

Values

<numberX>The scale of the element horizontally.
<numberY>The scale of the item vertically. If no value is specified, it defaults to <numberX>.

Example

HTML

<div class="container">

  <div class="scaled-box">

    Hover over me!

  </div>

</div>

CSS

/* Styling for the container */

.container {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 300px;

}



/* The initial state of the box */

.scaled-box {

  width: 100px;

  height: 100px;

  background-color: #3498db;

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  font-family: sans-serif;

  

  /* Smooth transition for the scaling effect */

  transition: transform 0.3s ease-in-out;

}



/* The scaling effect on hover */

.scaled-box:hover {

  /* scale(X, Y) or scale(Value) for uniform scaling */

  transform: scale(1.5);

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS scale() function. Hover over a browser icon to see the version that first introduced support for this CSS function.