CSS scale Property

Definition and Usage

The scale property resizes an element around its transform-origin. One value scales X and Y the same. Two values set X then Y. Three values add a Z factor for 3D.

It is an individual transform property, like translate and rotate. That lets you change size without rewriting a full transform list. The initial value is none. It is not inherited and creates a stacking context when not none.

CSS Syntax

Example: scale: 1.5; or scale: 2 1;. Factors above 1 grow; below 1 shrink. none matches a factor of 1.

Property Values

How to Use scale

Pick a factor (and optional second/third axes), then adjust the origin if growth looks off-center.

1. Choose the element to resize (any transformable box).
2. Set scale to one, two, or three numbers/percentages.
3. Change transform-origin if you need a different growth point.
4. Optional: pair with transition for hover motion — respect prefers-reduced-motion when animating.

Live Preview

Change scale on the sample box. The dashed frame is the original layout space.

CSS Examples

Each snippet focuses on scale. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
  .box {
    scale: 1.5;
    background: #2563eb;
    color: #fff;
    padding: 16px;
    width: 80px;
    text-align: center;
  }
</style>

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

<style>
  .box {
    scale: 2 1;
    background: #2563eb;
    color: #fff;
    padding: 16px;
    width: 80px;
    text-align: center;
  }
</style>

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

<style>
  button {
    scale: 1;
    transition: scale 0.25s ease;
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 12px 16px;
  }
  button:hover {
    scale: 1.15;
  }
</style>

<button type="button">Hover me</button>

Key Takeaways