CSS skewY() Function

CSS skewY() Function

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

It is used with the transform property to create angled top and bottom edges, slanted panels, and visual effects. The transformation changes the element's appearance without changing the space reserved for it in the normal document layout.

Syntax

transform: skewY(angle);

The skewY() function requires one angle that determines the amount and direction of vertical skewing.

Examples:

transform: skewY(0deg);
transform: skewY(10deg);
transform: skewY(20deg);
transform: skewY(-20deg);
transform: skewY(0.05turn);
transform: skewY(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 within the transform property rather than as a standalone CSS property.

Parameters

The skewY() function accepts exactly one parameter.

The angle can use any standard CSS angle unit:

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

A unitless zero is also accepted:

transform: skewY(0);

Nonzero angles must include an angle unit. For example, skewY(15) is invalid, while skewY(15deg) is valid.

CSS calculations and custom properties can also supply the angle:

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

How It Works

The skewY() function shifts points vertically according to their horizontal distance from the transformation origin.

For example:

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

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

With the default center origin, a positive angle shifts the left edge upward and the right edge downward.

A negative angle reverses these directions.

Unlike rotate(), which turns the entire element, skewY() distorts its shape vertically.

The amount of vertical displacement depends on the tangent of the supplied angle and each point's horizontal distance from the origin.

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

Angle Values

The skewY() function accepts standard CSS angle values.

These expressions represent the same angle:

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

Small angles generally create subtle effects, while larger angles produce more noticeable distortion.

Angles approaching 90 degrees can produce extreme results because the tangent becomes very large.

Positive and Negative Angles

The sign of the angle determines the direction of vertical skewing.

Positive Angle

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

With the default center origin, the left edge shifts upward and the right edge shifts downward.

Negative Angle

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

The left edge shifts downward and the right edge shifts upward.

Zero Angle

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

The element retains its original appearance.

Even when the angle is zero, a transform value other than none creates a stacking context.

Transform Origin

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

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

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

The origin can be moved to another position:

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

With the origin on the left edge, points along that edge remain at their original vertical positions, while points farther right move vertically.

Other origin values include:

transform-origin: right center;
transform-origin: top left;
transform-origin: bottom right;
transform-origin: 25% 50%;

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

skewY() vs. skew()

The skewY() function skews an element vertically, while skewX() skews horizontally and skew() can use both axes.

The following declarations produce the same vertical skew:

transform: skewY(15deg);
transform: skew(0deg, 15deg);

For a transformation affecting only the vertical axis, skewY() makes the intended effect clear.

Applying skewX() and skewY() separately is not generally equivalent to a two-angle skew() transformation.

Combining Transform Functions

The skewY() function can be combined with other transform functions in a single declaration.

Translation

.box {
  transform: translateY(20px) skewY(15deg);
}

The element is skewed vertically and moved 20px downward.

Rotation

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

The skew is applied before the rotation.

Scaling

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

The element 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) skewY(20deg);
transform: skewY(20deg) rotate(15deg);

Changing the order changes how the transformations are combined.

Multiple transforms should be included in the same transform declaration when they are intended to work together.

CSS Custom Properties

CSS custom properties can store and reuse the angle supplied to skewY().

For example:

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

Changing the custom property updates the transformation.

A fallback angle can also be supplied:

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

If --skew-angle is not defined, the element uses a 10-degree skew.

Custom properties are useful when several elements share the same angle or when the value changes between component states.

Example

The following example compares a normal box with positive and negative vertical skew angles.

HTML:

<div class="skewy-demo">
  <div class="skewy-item">Normal</div>
  <div class="skewy-item skewy-positive">15deg</div>
  <div class="skewy-item skewy-negative">-15deg</div>
</div>

CSS:

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

The first box remains rectangular. The other two boxes have slanted top and bottom edges.

The positive and negative angles produce opposite slopes.

The original layout dimensions remain unchanged, even though the transformed shapes extend beyond their original boundaries.

Slanted Panel Example

The following example creates a panel with angled top and bottom edges while keeping its text upright.

HTML:

<div class="skewy-panel">
  <div class="skewy-panel-content">
    <strong>CSS Transforms</strong>
    <p>Create angled designs with skewY().</p>
  </div>
</div>

CSS:

.skewy-panel {
  max-width: 320px;
  margin: 30px auto;
  padding: 25px;
  color: #fff;
  background-color: #2e86c1;
  transform: skewY(-5deg);
}
.skewy-panel-content {
  transform: skewY(5deg);
}
.skewy-panel-content p {
  margin: 8px 0 0;
}

The outer panel uses skewY(-5deg) to create diagonal top and bottom edges.

The inner content uses the opposite angle to cancel the skew applied to the text.

This technique allows a panel to have a slanted shape without making its content difficult to read.

Transition Example

The skewY() function can be animated with a CSS transition.

HTML:

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

CSS:

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

The button begins without a visible skew.

When hovered or focused, it transitions to a vertical skew of 10 degrees.

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

Common Uses

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

• Slanted panels: Create sections with diagonal top and bottom edges.
• Decorative backgrounds: Add angled shapes to page designs.
• Cards and labels: Create visual effects using small vertical skew angles.
• Transitions: Animate changes between vertical skew angles.
• Combined transforms: Use skewing with translation, scaling, or rotation.
• Custom properties: Control skew angles through reusable CSS variables.

For example:

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

This creates a panel with slanted horizontal edges while retaining its original layout space.

Limitations

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

• It requires exactly one angle argument.
• Nonzero values must include a valid CSS angle unit.
• It changes the element's visual shape without changing its original layout dimensions.
• Text and child elements are also transformed.
• Large angles can cause distortion and visual overflow.
• Angles near 90 degrees can produce extreme vertical displacement.
• The transform-origin property affects how the skew is positioned.
• A non-none transform creates a stacking context.
• The transformation does not change the element's DOM order or normal document flow.
• The order of multiple transform functions can affect the final appearance.

Valid and Invalid Values

These declarations are valid:

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

The following is invalid because the angle has no unit:

transform: skewY(15);

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

transform: skewY(15deg, 10deg);

Visual Overflow

Skewed elements can extend beyond their original layout boundaries and overlap nearby content.

Provide enough spacing around transformed elements, particularly when using larger angles.

Accessibility

Skewed text can become difficult to read, especially when large angles are used.

Consider applying an opposite skew to inner content or transforming a decorative background instead.

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

Browser Support

The CSS skewY() 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 skewY().

Specifications

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

The specification defines its angle argument and the two-dimensional transformation matrix used to calculate vertical skewing.

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