Free · Fast · Privacy-first

CSS Scale Transform

The CSS scale() function enlarges or shrinks an element by a numeric multiplier.

⚡

Supports scale(), scaleX(), scaleY(), and scale3d()

🔒

Values below 1 for shrink effects and entrance animations

✨

Live preview shows exact size change before you copy the code

⚡

Performance comparison notes for scale vs width/height changes

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Transform Gen to your website

Drop the Transform Gen into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/transform-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Transform Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/transform-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Transform Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

How CSS scale() Works, When to Use scaleX vs scaleY, and Why Scale Beats Width for Animations

The scale() function accepts one or two numeric values. A single value like scale(1.1) scales the element uniformly by 10% on both axes. Two values like scale(1.2, 0.8) scale X and Y independently, which is useful for squash-and-stretch effects. scaleX(n) and scaleY(n) are shorthand forms that set only one axis; the other axis remains at 1. Negative scale values flip the element: scaleX(-1) mirrors it horizontally, scaleY(-1) flips it vertically. These are the standard CSS technique for creating mirror effects without maintaining a separate flipped asset. Scale values can be any positive or negative number, including decimals and values greater than 1.

Scale transforms run on the GPU compositor in the same way as translate and rotate. The browser does not trigger layout or paint when scale changes during a transition or animation. This makes scale the correct replacement for any animation that would otherwise change width, height, padding, or font-size to achieve a grow or shrink effect. Changing width from 200px to 240px on each animation frame forces the browser to recalculate layout for every element affected by the size change, then repaint the affected region. Changing scale(1) to scale(1.2) costs nothing beyond updating a GPU matrix value. For hover effects on large numbers of elements, the performance gap between the two approaches is measurable.

Hover scale effects on cards and images follow a consistent pattern: the element scales up slightly on hover, and overflow: hidden on the parent clips the growth to prevent the element from pushing into its neighbors. A scale of 1.03 to 1.08 is the typical range for card hover effects; larger values look aggressive. An image inside a card container should have the scale applied to the img element rather than the card itself so the card boundary stays stable. The parent card receives overflow: hidden. The transition duration is usually 200ms to 300ms with ease-out easing for a responsive, snappy feel. The generator produces both the scale value and the transition property needed for the effect.

Scale interacts with the GPU compositor in a way that exposes texture resolution. When you scale an element above 1, the browser stretches the existing rasterized texture rather than re-rasterizing at the larger size. For static images this is fine, but for vector content and text the result can look blurry at scales above 1.5. The fix is will-change: transform, which tells the browser to rasterize at the upcoming peak scale rather than the current size, or scaling the element to the larger value first and then scaling back down using a reverse scale on a wrapper. Both techniques cost extra GPU memory, so reserve them for the few elements that need pristine quality at high scale factors. Removing will-change after the animation completes returns the memory.

MDN: scale()MDN: CSS will-change

How to use this tool

💡

Enter a scale multiplier in the X and Y fields or use the unified scale slider. Use the axis lock toggle to scale proportionally. Adjust transform-origin to set the growth anchor point. Preview the result and click Copy Code to export.

How It Works

Step-by-step guide to css scale transform:

1
Set the scale value
Enter a multiplier in the scale field. Values above 1 enlarge the element; values below 1 shrink it. Use the X and Y fields separately to scale axes independently.
2
Choose proportional or independent scaling
Toggle the axis lock to scale X and Y together. Unlock it to set scaleX and scaleY to different values for squash, stretch, or flip effects.
3
Set transform-origin
Click the origin grid or enter custom values to control the anchor point. Top-center makes the element grow downward; bottom-center makes it grow upward.
4
Copy the output
Click Copy Code to export the scale transform declaration. Add transition: transform 200ms ease to your selector to animate the scale change on interaction.

Real-world examples

Common situations where this approach makes a real difference:

Image gallery hover zoom

A photographer portfolio needs images to zoom in smoothly on hover without expanding the grid layout. The developer applies transform: scale(1.06) on the img:hover selector, sets overflow: hidden on the figure container, and adds transition: transform 300ms ease to the base img rule. The generator confirms scale(1.06) is subtle enough to feel elegant. The grid layout is completely unaffected because the scale transform does not change the layout dimensions of the image.

Call-to-action button scale pulse

A landing page CTA button uses a CSS animation to gently pulse between scale(1) and scale(1.04) on a 2-second loop to draw attention without being distracting. The developer uses the generator to confirm the scale range looks appropriate on the specific button size, then copies the values into @keyframes. The animation uses ease-in-out so the growth and shrink feel smooth rather than mechanical.

Modal entrance animation

A dialog component appears with a scale-up entrance: starting from scale(0.9) opacity: 0 to scale(1) opacity: 1 over 200ms. The generator is used to preview scale(0.9) as the starting state to confirm the initial size reads as "slightly small" rather than dramatically different. The 10% scale difference is enough to communicate motion but small enough not to alarm users on first interaction.

Flip mirror for RTL navigation arrow

A multi-language application has a right-arrow icon used in navigation. For RTL languages the arrow must point left. The developer uses the generator to produce transform: scaleX(-1), which mirrors the icon along the vertical axis without requiring a second SVG asset. The generated CSS is placed in a [dir="rtl"] selector applied to the document root, so the flip applies automatically to all instances of the icon class.

Pro tips

Get better results with these expert suggestions:

Never animate width or height when scale achieves the same result

Animating width or height triggers layout recalculation on every frame because other elements may need to reflow. Animating transform: scale() costs one GPU matrix update per frame with no layout impact. For any grow or shrink animation where the document layout does not actually need to change, replacing width/height animation with scale animation and adjusting perceived intent through transform-origin is always the correct approach.

Use the standalone scale property to avoid overriding other transforms

CSS Transforms Level 2 introduced a standalone scale property. Writing scale: 1.1 on hover does not override a transform: translateY(-4px) on the same element from a different rule. This compositing behavior is valuable in design systems where base component styles use transform for positioning and interactive states need to add scale independently without duplicating the full transform declaration.

Test scale effects on text containers separately from image containers

Scaling a container that includes text enlarges the text along with the container. If the design intent is to zoom only the background image or a child image element, apply the scale transform to the img element specifically rather than the card container. Apply overflow: hidden to the container. This way text labels on the card remain at normal size and the zoom effect is contained to the visual asset.

Squash-and-stretch with scaleX and scaleY creates physical feel

Animating a ball element from scaleX(1) scaleY(1) to scaleX(1.4) scaleY(0.7) as it hits the ground and back to scaleX(0.8) scaleY(1.2) as it launches upward creates a classic squash-and-stretch that reads as physical weight. This technique comes from traditional animation principles and works entirely with CSS transforms, using either @keyframes or a JavaScript spring library for the timing.

Use scale for entrance animations starting near zero

Starting an element at scale(0.85) and transitioning to scale(1) on mount creates a natural pop-in effect. The range is small enough to avoid jarring motion but large enough to communicate that the element is appearing rather than simply becoming visible. Combine with opacity: 0 to opacity: 1 for a complete entrance.

Apply overflow: hidden to the parent for image zoom

When scaling an image inside a card on hover, the image will overflow its container without overflow: hidden on the parent. Add overflow: hidden to the card or container element, not to the image itself. The image scale animation then stays within the card boundary and looks intentional rather than broken.

Set transform-origin for directional growth

By default, scale grows from the center of the element. For a button that should grow from its left edge, set transform-origin: left center before the scale value. For a dropdown that expands downward from a trigger, set transform-origin: top center so the growth direction matches the visual relationship between trigger and menu.

FAQ

Frequently asked questions

Use scale(1.1). The value represents a multiplier applied to the element's current size: 1 means no change, 1.1 means 10% larger, 1.5 means 50% larger, and 2 means twice the original size. For shrinking, use values below 1: scale(0.9) is 10% smaller, scale(0.5) is half size. You can also use two values to scale axes independently: scale(1.2, 1) makes the element 20% wider without changing its height.

Changing width or height triggers a layout recalculation on every animated frame because the browser must recheck how surrounding elements are positioned relative to the changed element. Scale transforms run on the GPU compositor without triggering layout. The visual result can look similar, but the performance difference is significant on complex pages with many elements. Always use transform: scale() for size changes that are visual only and do not need to affect the surrounding document layout.

Set transform-origin to the corner before applying the scale. For growth from the top-left corner, use transform-origin: 0 0 or transform-origin: top left. For growth from the bottom-right corner, use transform-origin: 100% 100% or transform-origin: bottom right. The element grows away from the origin point. This is how dropdown menus and tooltips are typically animated: the origin is set to the edge nearest the trigger, and the menu scales up from there.

No. An element with transform: scale(2) appears twice as large visually but still occupies its original layout space. Neighboring elements do not move to accommodate the scaled size. This is intentional: it allows hover scale effects on grid items without the grid reflowing on every hover interaction. If you need the enlarged size to actually push other elements aside, you must change the width and height properties rather than using scale.

scaleX(-1) mirrors the element horizontally. The element appears as its own mirror image, flipped along the vertical axis. This is the standard CSS technique for creating RTL mirror versions of directional icons, flip effects on images, and decorative mirrored layout elements. It is equivalent to transform: scale(-1, 1). The element's layout position does not change; only the visual rendering is mirrored. The same technique with scaleY(-1) mirrors vertically.

Yes. Transitioning scale from scale(1) to scale(0) shrinks the element to a point and is a valid hide animation. The element remains in the document flow even at scale(0), occupying its original space. If you also need the element to stop participating in layout, combine the scale animation with a change to display: none or visibility: hidden triggered after the transition ends via a transitionend event listener. Pure CSS hide animations with scale are common for dropdowns and modal exits.

The CSS standalone scale property, part of CSS Transforms Level 2, composes independently from the transform property. If one CSS rule sets transform: translateX(20px) and another rule or animation sets scale: 1.1, both apply simultaneously. In contrast, two rules with transform: translateX(20px) and transform: scale(1.1) would have the second override the first. The standalone scale property is supported in all modern browsers as of 2022 and is preferable in component systems where transforms accumulate from multiple sources.

Most card hover effects use a scale between 1.02 and 1.08. Values below 1.02 are often imperceptible on small cards. Values above 1.08 look aggressive and draw too much attention for typical content cards. Image-heavy cards where the zoom is the primary interaction, like photo galleries, can go up to scale(1.12) or scale(1.15). Always pair the scale with overflow: hidden on the parent so the enlarged element does not visually overflow into neighboring cards.

Transforms, including scale, apply to block-level and inline-block elements but not to pure inline elements like spans or anchors in some older browser contexts. In modern browsers, transforms on inline elements are supported, but the behavior can differ from block elements depending on how the browser calculates the bounding box. For reliable scale behavior, set display: inline-block or display: block on the element before applying scale. This is a common source of unexpected behavior when applying scale to inline text spans.

Wrap your scale transition in @media (prefers-reduced-motion: no-preference) so the hover zoom only applies to users who have not requested reduced motion. For users who have, leave the hover state at scale(1) and rely on a non-motion cue like a border color change or box-shadow to signal interactivity. Sudden scale changes near 1.0 are usually acceptable even with reduced-motion preferences, but large scale animations from scale(0) to scale(1) on entrance should be replaced with an opacity fade. The media feature is supported in every modern browser and is the standard way to honor system-level motion preferences.

Yes. Any non-default scale value creates a new stacking context, the same as rotate, translate, or opacity below 1. Children of the scaled element are stacked against each other inside that context and cannot escape it with high z-index values. A modal that opens from inside a scaled hover card may render below sibling elements outside the card despite a z-index of 9999. The fix is to portal the modal to document.body or another root-level container so it lives outside the scaled element's stacking context. The scale property and transform: scale() behave identically in this respect.