How to create a skewed background using CSS ? Last Updated : 07 Oct, 2024 Summarize Comments Improve Suggest changes Share 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.ApproachHTML 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: Comment More infoAdvertise with us Next Article How to Create Wave Background using CSS? S sirohimukul1999 Follow Improve Article Tags : Web Technologies CSS 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 3 min read 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 cre 2 min read 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 2 min read 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 3 min read 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 2 min read 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 3 min read Like