CSS skewX() Function

CSS skewX() Function

The CSS skewX() function slants an element along the horizontal axis by a specified angle.

It is used with the transform property to create diagonal edges, angled backgrounds, and slanted visual effects. The transformation changes how an element appears without changing the space it occupies in the normal document layout.

Syntax

transform: skewX(angle);

The skewX() function accepts one angle that determines the amount and direction of horizontal skewing.

Examples:

transform: skewX(0deg);
transform: skewX(10deg);
transform: skewX(20deg);
transform: skewX(-20deg);
transform: skewX(0.05turn);
transform: skewX(0.25rad);

A positive angle skews the element in one direction, while a negative angle reverses the direction.

A value of 0deg produces no visible skew.

The function is used as a value of the transform property. It is not a standalone CSS property.

Parameters

The skewX() function requires exactly one parameter.

The argument accepts the standard CSS angle units:

• deg - Degrees
• rad - Radians
• grad - Gradians
• turn - Turns

A unitless zero is also valid:

transform: skewX(0);

Nonzero values require an angle unit. For example, skewX(20) is invalid, while skewX(20deg) is valid.

CSS calculations can also provide the angle:

transform: skewX(calc(10deg + 5deg));
transform: skewX(var(--skew-angle, 15deg));

How It Works

The skewX() function shifts points horizontally according to their vertical distance from the transformation origin.

For example:

.box {
  transform: skewX(20deg);
}

The element's vertical edges become diagonal while its top and bottom edges remain horizontal.

With the default center origin, a positive angle shifts the top edge toward the left and the bottom edge toward the right.

A negative angle reverses those directions.

Unlike rotate(), the function does not turn the entire shape. Instead, it distorts the shape horizontally.

The horizontal displacement is determined by the tangent of the supplied angle and the point's vertical distance from the origin.

The transformation also affects the element's contents, including text and child elements.

Angle Values

CSS supports four angle units for the skewX() function.

The following expressions represent the same angle:

transform: skewX(45deg);
transform: skewX(0.125turn);
transform: skewX(50grad);

For ordinary interface designs, smaller angles such as 5deg, 10deg, or 15deg are often easier to control.

Angles approaching 90 degrees can create extreme distortion because the tangent grows very large.

Positive and Negative Angles

The sign of the angle determines the direction of the horizontal skew.

Positive Angle

.box {
  transform: skewX(20deg);
}

With the default center origin, the top of the box shifts left and the bottom shifts right.

Negative Angle

.box {
  transform: skewX(-20deg);
}

The top shifts right and the bottom shifts left.

Zero Angle

.box {
  transform: skewX(0deg);
}

The element retains its original appearance.

Although a zero-angle transformation does not visibly skew the element, the transform property still creates a stacking context when its value is not none.

Transform Origin

The transform-origin property controls the point around which the skew transformation is applied.

By default, the origin is the center of the element:

.box {
  transform-origin: center;
  transform: skewX(20deg);
}

Changing the origin changes which parts of the element appear to move.

For example:

.box {
  transform-origin: top center;
  transform: skewX(20deg);
}

The top edge remains aligned with its original horizontal position, while points farther down shift horizontally.

Other possible origins include:

transform-origin: bottom center;
transform-origin: top left;
transform-origin: center;
transform-origin: 50% 75%;

For horizontal skewing, the vertical position of the origin is particularly important because the displacement depends on vertical distance.

skewX() vs. skew()

The skewX() function skews only along the horizontal axis, while skew() can skew along both axes.

These declarations produce the same horizontal skew:

transform: skewX(20deg);
transform: skew(20deg);
transform: skew(20deg, 0deg);

For new styles requiring only horizontal skewing, skewX() clearly communicates the intended transformation.

When combining horizontal and vertical skewing, remember that a two-angle skew() is not generally equivalent to applying skewX() and skewY() as separate functions.

Combining Transform Functions

The skewX() function can be combined with other CSS transform functions.

Translation

.box {
  transform: translateX(30px) skewX(15deg);
}

The box is skewed horizontally and translated 30px to the right.

Rotation

.box {
  transform: rotate(10deg) skewX(15deg);
}

The skew is applied before the rotation.

Scaling

.box {
  transform: scale(1.2) skewX(10deg);
}

The box is skewed and then scaled.

Transform Order

Transform functions are generally applied from right to left.

These declarations can produce different results:

transform: rotate(15deg) skewX(20deg);
transform: skewX(20deg) rotate(15deg);

When multiple transformations are required, keep them together in a single transform declaration.

CSS Custom Properties

CSS custom properties can store the angle used by skewX().

For example:

.box {
  --skew-angle: 15deg;
  transform: skewX(var(--skew-angle));
}

Changing --skew-angle changes the transformation.

A fallback can be included:

.box {
  transform: skewX(var(--skew-angle, 10deg));
}

If the custom property is not defined, the element uses a skew angle of 10 degrees.

Custom properties are useful for reusable components, hover effects, and designs that use consistent angles.

Example

The following example compares an untransformed box with positive and negative horizontal skew angles.

HTML:

<div class="skewx-demo">
  <div class="skewx-item">Normal</div>
  <div class="skewx-item skewx-positive">20deg</div>
  <div class="skewx-item skewx-negative">-20deg</div>
</div>

CSS:

.skewx-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 35px;
  padding: 30px 20px;
}
.skewx-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 70px;
  color: #fff;
  background-color: #3498db;
  text-align: center;
}
.skewx-positive {
  transform: skewX(20deg);
}
.skewx-negative {
  transform: skewX(-20deg);
}

The first box remains rectangular. The second uses a positive horizontal skew, while the third uses a negative horizontal skew.

The vertical edges slant in opposite directions depending on the sign of the angle.

All three boxes retain their original layout dimensions.

Slanted Button Example

The following example creates a slanted button while keeping its text upright.

HTML:

<button class="skewx-button" type="button">
  <span>Learn CSS</span>
</button>

CSS:

.skewx-button {
  padding: 12px 24px;
  border: none;
  color: #fff;
  background-color: #2e86c1;
  cursor: pointer;
  transform: skewX(-15deg);
}
.skewx-button span {
  display: inline-block;
  transform: skewX(15deg);
}
.skewx-button:hover {
  background-color: #1b4f72;
}
.skewx-button:focus-visible {
  outline: 3px solid #f39c12;
  outline-offset: 5px;
}

The button uses skewX(-15deg) to create angled sides.

The inner span uses skewX(15deg) to cancel the skew applied to the text.

This approach creates a slanted button shape without distorting the text.

Transition Example

The skewX() function can be animated with the transition property.

HTML:

<button class="skewx-transition" type="button">
  Hover or Focus
</button>

CSS:

.skewx-transition {
  padding: 15px 25px;
  border: none;
  color: #fff;
  background-color: #16a085;
  cursor: pointer;
  transform: skewX(0deg);
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.skewx-transition:hover,
.skewx-transition:focus-visible {
  background-color: #117864;
  transform: skewX(15deg);
}
.skewx-transition:focus-visible {
  outline: 3px solid #f39c12;
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .skewx-transition {
    transition: none;
  }
}

The button begins without a visible skew.

When hovered or focused, it transitions to a horizontal skew of 15 degrees.

The reduced-motion media query removes the transition for users who prefer less motion.

Common Uses

The skewX() function is useful for creating horizontal skew effects in CSS layouts and interface components.

• Angled buttons: Create buttons with diagonal sides.
• Navigation items: Add slanted backgrounds or hover effects.
• Decorative panels: Give rectangular panels angled vertical edges.
• Cards and labels: Create distinctive shapes without changing their layout dimensions.
• Transitions: Animate between different horizontal skew angles.
• Combined transforms: Use skewing with rotation, translation, or scaling.
• Reusable components: Control the angle through CSS custom properties.

For example:

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

This gives the panel angled vertical edges while preserving its original position in the normal document layout.

Limitations

The skewX() function has several behaviors and limitations to consider.

• It accepts exactly one angle parameter.
• Nonzero values require a CSS angle unit.
• It changes the element's visual shape without changing its original layout space.
• The transformation also affects text and child elements.
• Large angles can produce significant distortion or visual overflow.
• Angles approaching 90 degrees can produce extreme horizontal displacement.
• The transform-origin property affects the apparent position of the skewed element.
• A non-none transform creates a stacking context.
• The transformation does not change the DOM order or normal document flow.
• Combining transforms in different orders can produce different visual results.

Valid and Invalid Values

These declarations are valid:

transform: skewX(15deg);
transform: skewX(-20deg);
transform: skewX(0.05turn);
transform: skewX(calc(10deg + 5deg));

The following is invalid because the angle has no unit:

transform: skewX(15);

The following is invalid because the function accepts only one argument:

transform: skewX(15deg, 10deg);

Visual Overflow

Skewed elements can extend beyond their original rectangular layout boundaries.

Provide enough spacing to prevent unwanted overlap with nearby content.

Accessibility

Large skew angles can make text difficult to read.

For buttons and links, consider counter-transforming the text or skewing a decorative background instead of the content.

When animating skew transformations, respect the user's reduced-motion preference.

Browser Support

The CSS skewX() function has Baseline Widely available browser support. It has been supported across major browser engines since July 2015.

Support includes Chrome, Edge, Firefox, Safari, and other modern browsers.

The function is well established and can generally be used without special fallbacks in modern web projects.

For current compatibility information, visit Can I Use? and search for skewX().

Specifications

The skewX() function is defined in the CSS Transforms Module Level 1 specification.

The specification defines the accepted angle parameter and the two-dimensional transformation matrix used to calculate horizontal skewing.

Related functions include skew(), skewY(), rotate(), scale(), translate(), and matrix().