How to Use Skew in CSS: Simple Guide with Examples

Use the CSS transform: skew(angleX, angleY); property to slant an element along the X and/or Y axis. The angles are given in degrees or radians, and you can skew horizontally, vertically, or both at once.

Syntax

The skew() function is used inside the transform property to slant an element. It takes one or two angle values:

• skew(angleX): skews horizontally by angleX.
• skew(angleX, angleY): skews horizontally by angleX and vertically by angleY.

Angles can be in degrees (deg) or radians (rad).

css

transform: skew(20deg, 10deg);

Example

This example shows a blue box skewed 20 degrees horizontally and 10 degrees vertically. The box's shape is slanted but its size stays the same.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #007BFF;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-family: Arial, sans-serif;
  transform: skew(20deg, 10deg);
  border-radius: 8px;
}

Output

A blue square box in the center of the page, slanted diagonally with a skew effect.

Common Pitfalls

Common mistakes when using skew() include:

• Using angles without units (like 20 instead of 20deg), which will not work.
• Expecting skew() to resize or move the element; it only slants the shape.
• Applying skew without considering text readability, as skewed text can be hard to read.

Always specify units and test how skew affects your layout and content.

css

/* Wrong: missing units */
.element {
  transform: skew(20, 10); /* This will not work */
}

/* Right: with units */
.element {
  transform: skew(20deg, 10deg);
}

Quick Reference

Remember these tips when using skew():

• Use transform: skew(angleX, angleY); with units.
• Angles can be positive or negative to skew in different directions.
• Use skewX(angle) or skewY(angle) for single-axis skew.
• Skew affects the shape but not the element's position or size.

Key Takeaways

Use transform: skew(angleX, angleY); with angle units to slant elements.

Specify units like deg or rad for angles; no units means no effect.

Skew changes shape but does not move or resize the element.

Use skewX() or skewY() for skewing on one axis only.

Be careful with skewed text as it can reduce readability.