Skew Transform

The skew() function tilts an element along the X or Y axis. It distorts the shape by pushing one side further than the opposite side. Skew is less commonly used than rotate or scale, but it is great for creating dynamic, angular designs.

Skew X and Skew Y

skewX() tilts the element horizontally, while skewY() tilts it vertically. Positive values lean to the right (X) or downward (Y). Negative values go the opposite direction.

.lean-right {
  transform: skewX(10deg);
}

.lean-left {
  transform: skewX(-10deg);
}

.lean-down {
  transform: skewY(5deg);
}
    

You can also use skew() with two values to skew on both axes at once: skew(10deg, 5deg). This is less common but available if you need it.

Creative Uses of Skew

Skew is popular in modern web design for creating angled sections and dynamic backgrounds. A common pattern is to use skew on a pseudo-element to create a slanted divider between sections.

.section {
  position: relative;
  overflow: hidden;
}

.section::before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  right: -50px;
  height: 100px;
  background: #333;
  transform: skewY(-3deg);
}
    

This creates a diagonal edge at the top of the section. By skewing a pseudo-element instead of the content itself, you preserve readability while adding visual interest.

Skew on Hover

You can combine skew with transitions for interactive effects. A slight skew on hover adds a playful, dynamic feel to buttons and cards.

.playful-btn {
  transition: transform 0.2s ease;
}

.playful-btn:hover {
  transform: skewX(-5deg);
}
    

Keep the skew angle small for hover effects — 3 to 5 degrees is usually enough to feel dynamic without looking broken. Larger angles work better for decorative elements.