CSS Skew

CSS Skew is a transform effect that makes an element look tilted or slanted.
It does not rotate the element or move it around. It simply changes the angles of its sides.

You can think of it like slightly pushing a card from the side — the card stays in the same place, but it looks slanted.

What Does CSS Skew Actually Do?

Skew does not change the size or position of an element.
It only affects how the element looks.

The browser still treats the element as normal, but visually:

• The edges become angled
• The shape appears slanted

This is why skew is considered a visual design effect, not a layout tool.

See the Pen CSS Skew Example by Ritik kumar (@nsaupapt-the-animator) on CodePen.

What Skew Does NOT Change

When you apply skew, all of these stay the same:

• Width and height
• Position on the page
• Space used in the layout
• Document flow
• Rotation of the element

Because of this, nearby elements don’t move or adjust at all.

What Skew DOES Change

Skew changes only one thing:

• The angles of the element’s sides

This small change is enough to create:

• Stylish UI elements
• Eye-catching banners
• Decorative cards and sections

That’s why skew is mostly used for design accents, not for large text blocks.

Important Requirement Before Using Skew

CSS transforms like skew work correctly only when the element behaves like a box.

When Skew May Not Work

Skew doesn’t work properly on inline elements, such as:

• span
• a
• strong

The Fix

Convert the element into a box-like element:

.element {

  display: inline-block;

}

Now the skew effect will apply perfectly.

How CSS Skew Works

Skew is applied using the skew() function inside the transform property.

Syntax

transform: skew(x-angle, y-angle);

• x-angle tilts the element left or right
• y-angle tilts it up or down
• Angles are always written in degrees (deg)

Skew in the X Direction (Horizontal Tilt)

transform: skew(30deg, 0deg);

• Top and bottom edges stay straight
• Left and right sides tilt
• The element looks slanted sideways

Commonly used in slanted buttons, banners, and hero sections.

Skew in the Y Direction (Vertical Tilt)

transform: skew(0deg, 30deg);

• Left and right edges stay straight
• Top and bottom edges tilt
• The element looks slanted vertically

Great for decorative blocks and background shapes.

Skew in Both Directions

transform: skew(30deg, 20deg);

The element tilts in both directions, creating a more dynamic and artistic effect.
Best used for design accents, not content-heavy areas.

Using skewX() and skewY()

For cleaner code, CSS provides single-direction functions.

skewX()

transform: skewX(25deg);

Tilts the element left or right only.

skewY()

transform: skewY(25deg);

Tilts the element up or down only.

These are easier to read and commonly used in real projects.

Positive vs Negative Skew Values

• Positive values tilt in one direction
• Negative values tilt in the opposite direction

Example

transform: skewX(-30deg);

This tilts the element sideways in the reverse direction.