CSS scale Property

What You’ll Learn

The scale property resizes an element visually along the X and Y axes. It is useful for hover effects, emphasis, and playful UI without changing width and height properties directly.

Introduction

The scale property in CSS is used to change the size of an element. This property allows you to scale an element up or down along the X and Y axes, without affecting its original dimensions in the layout.

The scaling is relative to the element’s transform-origin, which is usually the center by default. The scale property is part of the CSS Transforms module and is used to create dynamic and responsive designs.

Definition and Usage

Use scale: 1.05 for subtle hover growth, scale: 0.9 for pressed-button feedback, or scale: 2 1 when only the width should stretch visually.

You may also see transform: scale(2, 1) in older examples. The standalone scale property is the modern equivalent and works well with CSS transitions.

📝 Syntax

The syntax for the scale property involves specifying the scale factors for the X and Y axes. You can scale an element uniformly or non-uniformly.

element {
  scale: sx sy;
}

• sx is the scaling factor along the X-axis.
• sy is the scaling factor along the Y-axis (optional).

Basic Example

.box {
  scale: 2 1;
}

Syntax Rules

• One value scales both axes equally, such as scale: 1.5.
• Two values set X first, then Y, such as scale: 2 1.
• Values above 1 enlarge the element visually.
• Values between 0 and 1 shrink the element visually.
• none resets scaling to the default size.
• Use transform-origin to change the pivot point.

🎯 Default Value

The default value of the scale property is none, which means the element is rendered at its original size. This is equivalent to a scale factor of 1.

💎 Property Values

When Does scale Matter?

scale is the right tool when you want visual resizing without editing width and height:

• Hover cards — Gently enlarge tiles on mouse hover.
• Buttons — Shrink slightly on press for tactile feedback.
• Icons — Emphasize one action without reflowing layout.
• Image previews — Zoom content inside a fixed frame.

For true layout resizing that affects surrounding content, change width, height, or use layout systems like Grid and Flexbox.

Examples Gallery

Start with the reference non-uniform scale, compare uniform growth, shrink with values below 1, and animate scale on hover.

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    scale: 2 1;
  }
</style>

<div class="box"></div>

<style>
  .grow {
    scale: 1.5;
  }
</style>

<style>
  .compact {
    scale: 0.75;
    transform-origin: top left;
  }
</style>

<style>
  .tile {
    scale: 1;
    transition: scale 0.25s ease;
  }

  .tile:hover {
    scale: 1.08;
  }
</style>

scale vs transform: scale()

The standalone scale property is the modern way to resize elements visually. The classic form is transform: scale(2, 1), which still appears in many tutorials.

Pair scaling with rotate and transform-origin when building richer transform effects.

.badge {
  transform-origin: center;
  scale: 1.1;
}

💡 Best Practices