Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create Wave Background using CSS?
In this article, we will be discussing different methods to create wave backgrounds using CSS. Creating a wave background using CSS is a popular technique used to add a unique and dynamic visual element to web pages. Various techniques like CSS animations, pseudoelements, and clip-path can be used to achieve this effect.
Approaches
We have two different approaches to creating wave backgrounds using CSS including the following −
Using the “CSS gradients”
Using the “:before pseudo-element”
Let us look at each step in detail.
Approach 1: Using the "CSS gradients method"
The first approach is to create a wave background using CSS as “CSS gradients”. It is used to create a curved wave pattern by defining a sequence of colors that create a wavelike shape. You can then apply this gradient as a background to an HTML element to create a wave effect.
Example
Following is an example to create a wave background using CSS using “CSS gradients”.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>CSS Waves</title>
<style>
html,
body {
height: 100%;
}
wave-container {
height: 5%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: #e6f2ff;
}
.wave {
background: url(https://ilumina.ca/img/blue_bg_02.png)
repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 300px;
}
</style>
</head>
<body>
<div class="wave-container">
<div class="wave"></div>
<div class="wave"></div>
</div>
</body>
</html>
Approach 2: Using the “:before pseudo-element"
The second approach is to create a wave background using CSS as “:before pseudoelement”. The :before pseudo-element allows you to add content before an element, which in this case will be used to create the wave effect. Here, you can create a new CSS rule for the parent container wave-container and add the :before pseudo-element to it.
Example
Following is an example to create a wave background using CSS using the “:before pseudoelement method”.
index.html file
<!DOCTYPE html>
<html>
<head>
<style>
.wave-container {
height: 5%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: #e6f2ff;
}
.wave {
background: url(https://ilumina.ca/img/blue_bg_02.png)
repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 300px;
animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1500px;
}
}
</style>
</head>
<body>
<div class="wave-container">
<div class="wave"></div>
</div>
</body>
</html>
Conclusion
In this article, we examined two different approaches to create wave background using CSS. Here, we are using two different approaches “CSS gradients” and the ”:before pseudoelement”.The "CSS gradients" approach involves setting multiple colors stops to create a curved shape and using the resulting gradient as a background image for an element. The ":before pseudo-element" approach involves creating a pseudo-element and applying CSS styling to it in order to create the wave effect. Both approaches have their advantages and can be used depending on the specific needs of the web page.
3K+ Views
