Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Creating a skewed background using CSS
A skewed background is a design effect that creates a diagonal or angled appearance on the background of a web page or element. This effect can be achieved using CSS transforms to skew the container element, along with other CSS properties like background-color, gradients, and images to create the desired visual effect.
Syntax
/* Using transform */
.skewed-element {
transform: skewY(angle);
}
/* Using clip-path */
.clipped-element {
clip-path: polygon(coordinates);
}
Method 1: Using Transform Property
The following example creates a skewed background using the transform: skewY() property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skewed Background</title>
<style>
:root {
--skew-angle: -10deg;
--bg-color-1: #e0c3fc;
--bg-color-2: #8ec5fc;
}
.skewed-background {
transform: skewY(var(--skew-angle));
background: linear-gradient(110deg, var(--bg-color-1) 0%, var(--bg-color-2) 100%);
padding: 50px;
color: #000000;
margin: 20px 0;
}
.skewed-background h1 {
font-size: 36px;
margin: 0;
}
.skewed-background p {
font-size: 18px;
margin: 20px 0 0;
}
</style>
</head>
<body>
<div class="skewed-background">
<h1>Welcome to Tutorialspoint</h1>
<p>This is an example of a skewed background using CSS transform</p>
</div>
</body>
</html>
A purple-to-blue gradient background appears at a -10 degree angle with white text content inside.
Method 2: Using Clip-Path Property
This approach uses clip-path to create a polygonal skewed shape
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skewed Background using clip-path</title>
<style>
body {
margin: 0;
padding: 0;
}
.skewed-background {
height: 50vh;
background: linear-gradient(110deg, #e0c3fc 0%, #8ec5fc 100%);
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
padding: 50px;
color: #000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.skewed-background h1 {
font-size: 36px;
margin: 0;
}
.skewed-background p {
font-size: 18px;
margin: 20px 0 0;
}
</style>
</head>
<body>
<div class="skewed-background">
<h1>Welcome to Tutorialspoint</h1>
<p>This is an example of a skewed background using clip-path</p>
</div>
</body>
</html>
A gradient background with a diagonal bottom edge created by clipping, containing centered text content.
Method 3: Using CSS Grid
This method uses CSS Grid to position a skewed background element behind content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skewed Background with CSS Grid</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
height: 50vh;
overflow: hidden;
}
.content {
grid-column: 1/2;
grid-row: 1/2;
background: white;
padding: 40px;
z-index: 1;
position: relative;
}
.background {
grid-column: 1/3;
grid-row: 1/2;
transform: skewX(-12deg);
background: linear-gradient(110deg, #e0c3fc 0%, #8ec5fc 100%);
z-index: -1;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>Welcome to Tutorialspoint</h1>
<p>This is an example of a skewed background using CSS Grid</p>
</div>
<div class="background"></div>
</div>
</body>
</html>
A white content area overlays a skewed gradient background, creating an angled design effect.
Method 4: Using SVG
This approach uses SVG paths to create custom skewed shapes
<!DOCTYPE html>
<html>
<head>
<title>Skewed Background using SVG</title>
<style>
.skewed-background {
height: 300px;
width: 100%;
position: relative;
overflow: hidden;
}
.skewed-background svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.skewed-background path {
fill: #e0c3fc;
}
.content {
position: absolute;
top: 50px;
left: 50px;
color: #333;
z-index: 2;
}
</style>
</head>
<body>
<div class="skewed-background">
<svg viewBox="0 0 500 100" preserveAspectRatio="none">
<path d="M 0 0 L 500 0 L 500 100 L 0 50 Z" />
</svg>
<div class="content">
<h1>Welcome to Tutorialspoint</h1>
<p>This is an example of a skewed background using SVG</p>
</div>
</div>
</body>
</html>
A custom angled background created with SVG, overlaid with text content positioned absolutely.
Conclusion
Each method offers different advantages: transforms are simple but affect all content, clip-path provides precise control, CSS Grid offers layout flexibility, and SVG enables completely custom shapes. Choose the method that best fits your design requirements and browser support needs.
Updated on: 2026-03-15T17:33:52+05:30
3K+ Views
Advertisements