CSS scale() Function

CSS scale() Function

The CSS scale() function increases or decreases the visual size of an element along the horizontal and vertical axes.

It is used with the transform property to resize elements without changing their original layout dimensions. The function accepts one or two scaling factors, allowing elements to grow, shrink, stretch, compress, or reflect across an axis.

Syntax

transform: scale(sx);
transform: scale(sx, sy);

The scale() function accepts one or two scaling factors. The first controls horizontal scaling, and the optional second controls vertical scaling.

For example:

transform: scale(1);
transform: scale(1.5);
transform: scale(0.75);
transform: scale(1.5, 0.75);
transform: scale(-1, 1);

When only one value is provided, the same scaling factor is applied to both axes.

For example:

transform: scale(1.5);

This increases both the rendered width and height to 150% of their original dimensions.

When two values are provided, the axes can be scaled independently.

transform: scale(1.5, 0.75);

This increases the rendered width to 150% and reduces the rendered height to 75%.

The function returns a CSS <transform-function> value and is used within the transform property.

Parameters

The scale() function accepts one required parameter and one optional parameter.

Scaling factors are unitless numbers. A value of 1 represents the original size, values greater than 1 enlarge the element, and values between 0 and 1 reduce its size.

Negative values reverse the corresponding axis while scaling its magnitude.

For example:

.box {
  transform: scale(2, 0.5);
}

This doubles the rendered width and reduces the rendered height by half.

The scaling factors do not use length units such as px, em, or rem.

How It Works

The scale() function multiplies an element's rendered dimensions by the specified scaling factors.

For example, an element that is originally 100px wide and 80px high can be scaled using:

.box {
  width: 100px;
  height: 80px;
  transform: scale(1.5);
}

The element appears 150px wide and 120px high because both dimensions are multiplied by 1.5.

The original CSS width and height remain 100px and 80px. Scaling changes the rendered appearance, not the underlying layout dimensions.

Using different scaling factors produces different results:

.box {
  width: 100px;
  height: 80px;
  transform: scale(2, 0.5);
}

The element appears 200px wide and 40px high.

By default, scaling occurs around the center of the element. The transform-origin property can change this reference point.

Scaling can also affect text, borders, images, and other rendered contents of the transformed element.

Scaling Factors

The scaling factor determines the relative size of an element after transformation.

For example:

.small {
  transform: scale(0.5);
}
.normal {
  transform: scale(1);
}
.large {
  transform: scale(1.5);
}

The first element appears at half its original width and height. The second remains unchanged, and the third appears 50% larger in each dimension.

A scale factor of 2 doubles both dimensions, making the rendered area four times as large when the element is not clipped.

Values greater than 2 are also valid, although large scaling factors can cause content to overlap surrounding elements or extend beyond its container.

Uniform Scaling

Uniform scaling applies the same factor to both the horizontal and vertical axes.

This preserves the element's proportions and aspect ratio.

For example:

.image {
  transform: scale(1.25);
}

The image becomes 25% wider and 25% taller without being stretched disproportionately.

The following declarations are equivalent:

transform: scale(1.25);
transform: scale(1.25, 1.25);

Uniform scaling is useful for enlarging images, icons, buttons, and other elements while preserving their original proportions.

For example, an image that is originally 200px wide and 120px high appears 250px wide and 150px high after applying scale(1.25).

Non-Uniform Scaling

Non-uniform scaling applies different factors to the X and Y axes.

This changes the element's proportions and may stretch or compress its contents.

For example:

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

The element becomes 50% wider and 25% shorter than its original dimensions.

Another example:

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

This reduces the width to 75% while increasing the height to 150%.

Non-uniform scaling can be useful for decorative effects, but it may distort images, text, and icons.

When the original proportions should remain unchanged, use one scaling factor or provide two equal factors.

Negative Scaling Values

Negative scaling factors reverse the element along the corresponding axis while applying the specified scaling magnitude.

For example:

.horizontal-flip {
  transform: scale(-1, 1);
}

This reflects the element horizontally, producing a mirror image across its vertical axis.

To reflect an element vertically:

.vertical-flip {
  transform: scale(1, -1);
}

This flips the element upside down across its horizontal axis.

Both axes can be reversed:

.double-flip {
  transform: scale(-1, -1);
}

This produces the same final orientation as a 180-degree rotation around the element's transform origin.

Negative scaling can be useful for mirroring directional icons, decorative graphics, and images.

Be careful when reflecting elements containing text because the text is also mirrored and may become difficult to read.

Transform Origin

The transform-origin property determines the point from which an element is scaled.

By default, the transform origin is the center of the element:

.box {
  transform-origin: center center;
  transform: scale(1.5);
}

The element grows outward from its center.

Changing the transform origin changes the direction in which the element appears to expand or contract.

For example:

.box {
  transform-origin: top left;
  transform: scale(1.5);
}

The element grows toward the right and downward while its top-left corner remains anchored.

Other values include:

transform-origin: top center;
transform-origin: bottom right;
transform-origin: center left;
transform-origin: 25% 75%;
transform-origin: 20px 40px;

Percentage values are relative to the element's transform reference box, while length values specify offsets from the reference point.

Changing the transform origin is especially useful for expanding panels, zooming images from a corner, and creating anchored interface effects.

Scaling vs. Width and Height

The scale() function changes the visual size of an element, while the width and height properties determine its layout dimensions.

For example:

.box {
  width: 100px;
  height: 100px;
  transform: scale(2);
}

The element appears 200px wide and 200px high, but it still occupies its original 100px by 100px space in normal document flow.

By comparison:

.box {
  width: 200px;
  height: 200px;
}

This changes the actual layout dimensions, which can affect the positioning of surrounding elements.

Use scale() for visual transformations and effects. Use width and height when the element's actual layout dimensions need to change.

Combining Transforms

The scale() function can be combined with other transform functions in a single transform declaration.

Scaling and Rotation

The following example enlarges and rotates an element:

.box {
  transform: scale(1.25) rotate(15deg);
}

The element is enlarged to 125% of its original dimensions and rotated 15 degrees.

Scaling and Translation

Translation can be combined with scaling to move and resize an element.

.box {
  transform: translateX(40px) scale(1.5);
}

The element is translated horizontally and scaled to 150% of its original dimensions.

Scaling and Skewing

The following example combines scaling with a skew transformation:

.box {
  transform: scale(1.2) skewX(10deg);
}

The element is enlarged and skewed horizontally.

Transform Order

The order of transform functions can change the final result.

.first {
  transform: translateX(50px) scale(2);
}
.second {
  transform: scale(2) translateX(50px);
}

In the first declaration, the translation produces a 50px movement in the parent coordinate system. In the second, the scaling also affects the translation, producing a 100px horizontal movement.

When combining transforms, keep their order consistent and test the final position and appearance.

Related Scaling Functions

CSS provides several functions for scaling elements along specific axes.

For example, these declarations are equivalent:

transform: scale(1.5, 0.75);
transform: scaleX(1.5) scaleY(0.75);
transform: scale3d(1.5, 0.75, 1);

The first uses two-dimensional scaling. The second applies independent horizontal and vertical scaling functions. The third expresses the same scaling factors in three dimensions, with the Z-axis factor left unchanged.

The scale3d() function is used when scaling needs to account for the Z axis as well.

CSS also provides an individual scale property. It allows scaling to be specified independently of the transform property.

.box {
  scale: 1.5;
}

This applies uniform scaling without using the scale() function.

Example

The following example compares normal size, uniform enlargement, uniform reduction, and non-uniform scaling.

HTML:

<div class="scale-demo">
  <div class="scale-item">
    <div class="scale-box normal">Normal</div>
  </div>
  <div class="scale-item">
    <div class="scale-box enlarged">150%</div>
  </div>
  <div class="scale-item">
    <div class="scale-box reduced">50%</div>
  </div>
  <div class="scale-item">
    <div class="scale-box stretched">X / Y</div>
  </div>
</div>

CSS:

.scale-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  padding: 30px 15px;
}
.scale-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background-color: #f1f1f1;
}
.scale-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  color: #fff;
  background-color: #3498db;
}
.normal {
  transform: scale(1);
}
.enlarged {
  transform: scale(1.5);
}
.reduced {
  transform: scale(0.5);
}
.stretched {
  transform: scale(1.5, 0.75);
}

The first box remains unchanged. The second grows uniformly, the third shrinks uniformly, and the fourth becomes wider and shorter.

The grey backgrounds show the original layout areas, which remain the same despite the visual transformations.

Transform Origin Example

The following example demonstrates how the transform origin changes the direction of scaling.

HTML:

<div class="origin-demo">
  <div class="origin-item">
    <div class="origin-box origin-center">Center</div>
  </div>
  <div class="origin-item">
    <div class="origin-box origin-left">Top Left</div>
  </div>
</div>

CSS:

.origin-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 30px 15px;
}
.origin-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  background-color: #f1f1f1;
}
.origin-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  color: #fff;
  background-color: #3498db;
  transform: scale(1.4);
}
.origin-center {
  transform-origin: center center;
}
.origin-left {
  transform-origin: top left;
}

The first box expands outward from its center. The second expands toward the right and bottom because its top-left corner is used as the transform origin.

Both boxes use the same scaling factor, but their visual positions differ because of the origin settings.

Transitions and Animations

The scale() function can be animated using CSS transitions and keyframe animations.

Hover Transition

The following example enlarges an element when the pointer moves over it:

.button {
  display: inline-block;
  transition: transform 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
}

The element grows to 110% of its original size over 0.3 seconds.

For keyboard-accessible controls, the same effect can be applied to :focus-visible.

.button:hover,
.button:focus-visible {
  transform: scale(1.1);
}

Keyframe Animation

The following animation repeatedly enlarges and reduces an element:

@keyframes scale-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
.pulse {
  animation: scale-pulse 2s ease-in-out infinite;
}

The element increases to 115% of its original size and then returns to normal.

Reduced Motion

Scaling and zooming animations can cause discomfort for some users. Use the prefers-reduced-motion media query to remove motion when requested.

@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
  .button {
    transition: none;
  }
}

This disables the continuous animation and removes the transition for users who prefer reduced motion.

Common Uses

The scale() function is useful for resizing elements visually without changing their original layout dimensions.

• Hover effects: Enlarge buttons, images, or cards when the pointer moves over them.
• Image galleries: Create zoom effects on thumbnails or featured images.
• Icons: Increase or decrease icon size for visual emphasis.
• Animations: Create pulsing, growing, shrinking, or expanding effects.
• Interactive controls: Provide visual feedback when buttons are pressed or focused.
• Decorative elements: Stretch, compress, or reflect graphics.
• Transform combinations: Combine scaling with rotation, translation, or skewing.
• Interface effects: Animate panels, menus, and other elements as they appear or disappear.

For example, a card can enlarge slightly on hover:

.card {
  transition: transform 0.25s ease;
}
.card:hover {
  transform: scale(1.05);
}

The card appears 5% larger without changing the space it occupies in the layout.

Keep enough space around scaled elements to prevent unwanted overlap with neighboring content.

Limitations

The scale() function has several requirements and behaviors to consider.

• The function requires one or two scaling factors.
• Scaling factors are unitless numbers, not pixel or length values.
• A single factor scales both axes equally.
• Two factors allow independent horizontal and vertical scaling.
• Negative factors reflect the element along the corresponding axis.
• A factor of zero visually collapses the corresponding dimension.
• Scaling does not change the element's original layout dimensions.
• Enlarged elements can overlap nearby content or extend beyond their containers.
• Non-uniform scaling can distort text, images, and other content.
• The scaling reference point is controlled by transform-origin.
• Transform functions must be combined within the same transform declaration to preserve multiple effects.
• Scaling animations should account for reduced-motion accessibility preferences.

For example, this is valid:

transform: scale(1.5);

The following is also valid:

transform: scale(1.5, 0.75);

The following is invalid because the function has no argument:

transform: scale();

The following is invalid because the function accepts no more than two scaling factors:

transform: scale(1, 2, 3);

To scale along three axes, use scale3d().

The following is invalid because the scaling factor uses a length unit:

transform: scale(150px);

Separate transform declarations do not accumulate:

.box {
  transform: scale(1.5);
  transform: rotate(20deg);
}

The second declaration replaces the first.

To combine both effects, write:

.box {
  transform: scale(1.5) rotate(20deg);
}

Finally, scaling an element to zero does not remove it from the document or automatically make it inaccessible. Use appropriate visibility, interaction, and accessibility controls when an element should be hidden or disabled.

Browser Support

The CSS scale() function has Baseline Widely available browser support. It has been supported across major browsers since July 2015, including Chrome, Edge, Firefox, and Safari.

The function is widely supported in modern desktop and mobile browsers. Older browser versions may require compatibility testing.

For current compatibility information, visit Can I Use? for CSS 2D transforms.

Specifications

The scale() function is defined in the CSS Transforms Module Level 1 specification.

The specification defines the function's syntax, scaling factors, transformation behavior, and relationship to the CSS transformation matrix.

Related functions include scale3d(), scaleX(), scaleY(), and scaleZ().