Skip to content

Courses
Tutorials
Practice
Contests

CSS Tutorial
CSS Exercises
CSS Interview Questions
CSS Selectors
CSS Properties
CSS Functions
CSS Examples
CSS Cheat Sheet
CSS Templates
CSS Frameworks
Bootstrap
Tailwind
CSS Formatter

How to Create Wave Background using CSS?

How to create a skewed background using CSS ?

Last Updated : 07 Oct, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

A skewed background design enhances a website’s visual appeal with dynamic, angled elements. By using CSS transform: skew() along with ::before and ::after pseudo-elements, you can easily create a slanted effect, adding a modern and engaging look to your site’s layout.

Approach

HTML Structure – Section Elements: The HTML contains two sections (#geeks1 and #geeks2) used to create different background effects on a webpage.
HTML Structure – Heading: The first section (#geeks1) includes a centered heading <h1>, which serves as the main title with styled text.
CSS – Base Background: Each section is given a specific background color, width, and height. #geeks1 has a solid background, while #geeks2 has a more dynamic design.
CSS – Pseudo-Elements: The ::before and ::after pseudo-elements are applied to #geeks2 to create skewed top sections, adding angled design layers.
CSS – Skew Effect: The transform: skewY() property is used on pseudo-elements to create a visually appealing, slanted top effect, enhancing the layout.

Example : In this example we are following above explained approach.

html

<!DOCTYPE html> <html lang="en">  <head>     <title>Skewed Background</title>      <style>         #geeks1 {             width: 100%;             height: 400px;             position: relative;             background: rgb(58, 238, 58);         }          h1 {             text-align: center;             padding: 200px;             font-family: -apple-system,                 BlinkMacSystemFont, "Segoe UI",                 Roboto, Oxygen, Ubuntu, Cantarell,                 "Open Sans", "Helvetica Neue",                 sans-serif;             color: white;             font-size: 40px;         }          #geeks2 {             width: 100%;             height: 400px;             position: relative;             background: rgb(2, 94, 25);         }          #geeks2::before {             content: "";             width: 50%;             height: 100px;             position: absolute;             top: -48px;             left: 0;             background: rgb(2, 94, 25);             transform: skewY(8deg);         }          #geeks2::after {             content: "";             width: 50%;             height: 100px;             position: absolute;             top: -48px;             right: 0;             background: rgb(2, 94, 25);             transform: skewY(-8deg);         }     </style> </head>  <body>     <section id="geeks1">         <h1>GeeksforGeeks</h1>     </section>     <section id="geeks2"></section> </body>  </html>

Output:

How to Create Wave Background using CSS?

S

sirohimukul1999

Improve

Article Tags :

CSS
Web Technologies
CSS-Questions

Similar Reads

How to create texture background using CSS ?

Introduction: We can use CSS property to texture the background of the web page by using an image editor to cut out a portion of the background. Apply CSS background-repeat property to make the small image fill the area where it is used. CSS provides many styling properties of the background includi

How to Create Wave Background using CSS?

A wave background is a design element having wavy patterns or shapes used to add movement in the web pages. The :before pseudo-element can be used to create a wavy background by applying it to an element and using CSS properties like clip-path to create wave shapes. Using :before pseudo-elementTo cr

How to Create a Sliding Background Effect Using CSS ?

A sliding background effect in CSS creates a smooth, continuous movement of a webpageâ€™s background image, typically in a horizontal or vertical direction. It gives a dynamic, animated feel by using properties like background-position and animation, enhancing visual engagement without additional Java

How to create a Chevron using Tailwind CSS ?

A Chevron is a basic geometric shape that is used in websites to indicate directional movements or navigation. By utilizing specific border properties and transformations, a chevron shape can be achieved without the need for custom CSS. Tailwind's utility-first approach allows for a straightforward

How to create Skewed Background with hover effect using HTML and CSS?

The skewed background or you can say an angel color shade background can be created by using HTML and CSS. This background can be used as a cover pic of your website that will be attractive. In this article, we will create a simple skewed background. We will divide the article into two sections in t

How to blur background image using CSS ?

CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of a document written in HTML. In this article, we will learn how to blur background images using CSS, along with basic implementation examples. Blurring Background Images with CSSTo blur a background image usi

How to create a Full-Page Background with CSS ?

To create a full-page background with CSS, set the body's height to `100vh` to cover the viewport, and add a background image using `background-image`. Ensure the image fills the entire viewport without distortion by setting 'background-size: cover'. Optionally, adjust 'background-position' and 'bac

How to create linear gradient background using CSS ?

In CSS, we can use the background-color property to set the background color of an element to a specific color.Â Sometimes we want to add more styling to the element when setting the background color by using the linear-gradient property. CSS linear-gradient property lets you display smooth transitio

How to create and style border using CSS ?

The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val

Create a Galaxy Background using HTML/CSS

In this article, we will see how to create the galaxy background using the HTML & CSS, along with knowing the basic CSS properties used & will understand it through the example. A galaxy background means a small bunch of circles having different sizes with different shades and a dark backgro

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences