CSS scale Property: Syntax and Examples

The CSS scale property scales a transformable element independently of its transform property. Write scale: 1.25 to enlarge it uniformly, scale: 1.4 0.8 to set horizontal and vertical scaling separately, or provide a third value to scale on the Z axis.

Because scaling changes how an element is rendered without recalculating its layout dimensions, nearby content does not move to make room. If you want scaling to be controlled independently from translation and rotation, use scale; if it belongs in a transform-function list, use transform: scale().

Syntax and values

scale: none;
scale: <number>;
scale: <number> <number>;
scale: <number> <number> <number>;

The property accepts none or one to three numbers or percentages. Values describe scale along the X, Y, and then Z axes. A percentage is equivalent to its number form: 100% equals 1.

Value count	Meaning	Example
One	Uniform X and Y scale	scale: 1.25
Two	Independent X and Y scale	scale: 1.4 0.8
Three	Independent X, Y, and Z scale	scale: 1.2 1 0.9
none	No scale transform	scale: none

If Y is omitted, it uses the X value. If Z is omitted, it defaults to 1, which has no effect on that axis. A third value other than 1 or 100% expresses 3D scaling.

• Values greater than 1 or 100% enlarge the element.
• Values between 0 and 1 shrink it.
• 1 and 100% leave the scale unchanged.

The initial value is none. The property is not inherited, applies to transformable elements, animates as a transform, and creates a stacking context. It does not apply to every conceivable element type.

Runnable examples

Save this as an HTML file and open it in a browser. The examples show a uniform hover scale, nonuniform dimensions, a three-axis value, and how to reset the property.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS scale examples</title>
<style>
  body { font: 1rem/1.5 system-ui, sans-serif; padding: 2rem; }
  .row { display: flex; gap: 2rem; align-items: center; }
  .card {
    width: 9rem;
    min-height: 6rem;
    display: grid;
    place-items: center;
    background: #dcecff;
    border: 1px solid #5185bd;
    border-radius: .5rem;
    transition: scale 180ms ease;
  }
  .card:hover { scale: 1.15; }
  .wide { scale: 1.4 0.8; }
  .panel-3d { scale: 1.2 1 0.9; }
  .reset { scale: none; }

  @media (prefers-reduced-motion: reduce) {
    .card { transition: none; }
  }
</style>
<div class="row">
  <div class="card">Hover to grow</div>
  <div class="card wide">Wide and short</div>
  <div class="card panel-3d">X, Y, Z values</div>
</div>
<div class="card reset">No scale</div>
</html>

For a static change, assign the value directly. To animate it, transition the property or use a keyframe animation; the value still follows the same axis rules.

.thumbnail { scale: 0.9; }
.thumbnail.is-selected { scale: 1; transition: scale 160ms ease; }

@keyframes pulse {
  from { scale: 1; }
  to   { scale: 1.04; }
}

Choosing between scale, transform: scale(), and zoom

Mechanism	When to use it	Layout behavior
scale property	You want scale set separately from translation, rotation, and a transform-function list.	Visual rendering changes; layout dimensions are not recalculated.
transform: scale()	You want scaling as one function in the transform list or need that syntax for a code path.	Like the individual property, it does not relayout neighboring content.
zoom	You specifically need zoom behavior that can affect page layout.	Can affect layout, unlike transform scaling.

The scale() transform function accepts one argument for uniform X/Y scaling or two arguments for separate X and Y factors. By default, transform scaling occurs around the element’s center; use transform-origin to adjust the origin. Oversized scaled content may overflow its container.

The individual transform properties have a defined order: translate, then rotate, then scale, then transform. They are not freely reorderable. The order of functions inside the transform value also matters. If preserving an existing transform sequence is important, keep the scale function in that list.

/* Separate properties: the order is defined by CSS */
.item {
  translate: 1rem 0;
  rotate: 5deg;
  scale: 1.1;
}

/* A transform-function list: function order matters */
.item-in-list {
  transform: translateX(1rem) rotate(5deg) scale(1.1);
}

Layout, origin, overlap, and accessibility

Scaling changes the painted size, not the element’s layout box. Other content keeps its original position, so scaled elements can overlap neighbors or extend beyond a clipping container. Check surrounding spacing, overflow, and stacking behavior when choosing a scale.

Transforms create stacking contexts. An element may therefore stack differently relative to nearby content even though its layout position has not changed. Test the result alongside positioned elements, overlays, and clipping ancestors.

For animated scaling, account for users who prefer reduced motion. Keep the effect subtle where possible, provide a way to turn it off when appropriate, and use the prefers-reduced-motion media query to remove or reduce animation.

.card {
  transition: scale 180ms ease;
}

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

Browser compatibility

MDN marks the independent scale property Baseline Widely available, with cross-browser availability since August 2022. That milestone does not guarantee every part of the latest standard is implemented in every browser. Check the browser compatibility table for your target browsers, especially before relying on less common syntax such as a non-default Z value.

If older browser support is needed, use a suitable fallback such as transform: scale() after checking its support for your target. Avoid declaring both mechanisms without considering the specified transform order and whether they would compound the scale.

Common problems and fixes

Symptom	Likely cause	Fix
Nearby content does not move when an element grows.	Transform scaling changes rendering, not layout dimensions.	Reserve space in the layout, adjust margins or dimensions, or choose a layout-affecting approach such as zoom when that behavior is intended.
The element overlaps or gets clipped.	The scaled visual bounds exceed the original layout box or an ancestor clips overflow.	Allow sufficient space, review overflow, and inspect stacking contexts.
A scale value appears to be ignored.	The element may not be transformable, the declaration may be invalid, or the target browser may lack the needed syntax.	Check the element type, use one to three valid number or percentage values, and verify target-browser support.
A scale compounds with an existing transform.	The individual scale property is applied before the transform property.	Use one scaling mechanism, or account for both in the desired order.
The scaled element appears behind another item.	Scaling creates a stacking context and can change stacking relationships.	Review positioned ancestors and stacking contexts; set an appropriate stacking order in the correct context.
A 3D value has no visible depth effect.	Z scaling may not be perceptible without a 3D context or suitable content.	Use 3D transforms and perspective deliberately, and verify the effect in the target rendering context.
An animation causes discomfort.	Scaling motion can be distracting, especially when repeated or large.	Reduce or remove motion for prefers-reduced-motion and provide a way to turn off nonessential animation.

Performance, reliability, and cost

CSS scaling is a browser rendering effect and does not require a network service. Keep animations restrained and avoid animating large numbers of elements without checking the result on your target devices. Visual scaling itself does not reserve extra layout space, so layout and overflow checks are part of reliable implementation.

To inspect a page’s rendered result in an automated workflow, a screenshot API can capture a URL without maintaining browser automation infrastructure. [ScreenshotNeo](https://screenshotneo.com) offers clean screenshots and bills only clean shots; its free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000 screenshots.

Or skip the browser setup

ScreenshotNeo can capture a page with one API call. Its [API documentation](https://screenshotneo.com/docs/) covers the request options.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

• Cookie banners are accepted and removed before the shot; known consent platforms, newsletter popups, and chat widgets are removed. Each step can be turned off.
• Bot checks, blank pages, failed loads, timeouts, and cache hits cost nothing. Responses include X-Page-Verdict and X-Billed headers.
• An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf.
• 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000.

Sign up for the free plan and get 1,000 screenshots a month with no card.

FAQ

Does scale change an element’s width and height?

It changes the rendered appearance, not the layout dimensions used to position surrounding content.

Can I use percentages?

Yes. Percentages are equivalent to numbers: 125% means the same scale as 1.25.

When should I choose the independent property?

Use it when scale should be controlled independently from translation and rotation. Use transform: scale() when scale belongs in the transform-function list.

Is the property inherited?

No. Its initial value is none.

References

• MDN: scale
• W3C CSS Transforms Module Level 2: individual transform properties
• MDN: scale() transform function
• MDN: zoom
• MDN: transform