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
How to Create Wave Background using CSS?
To create wave background using CSS is a popular technique used to add a unique and dynamic visual element to web pages. We will be understanding two different approaches to create wave background using CSS.
In this article, we are having a blank webpage and our task is to create wave background using CSS.
Approaches to Create Wave Background
Here is a list of approaches to create wave background using CSS which we will be discussing in this article with stepwise explanation and complete example codes ?
Method 1: Wave Background Using SVG
To create wave background using CSS, we can use SVG (Scalable Vector Graphics) embedded in HTML. SVG provides precise control over the wave shape and is scalable without quality loss.
Key components of this approach ?
- We use a div container to wrap the SVG element. The viewBox attribute sets a viewport 600px wide and 200px in height.
- The path tag defines the wave curve using the d attribute with commands: M (move to point), C (cubic Bezier curve), and L (line to).
- We use SVG fill attribute to set the wave color.
- CSS positions the text overlay and removes default browser spacing.
Example
Here is a complete example implementing SVG wave background ?
<!DOCTYPE html>
<html lang="en">
<head>
<title>SVG Wave Background</title>
<style>
body {
overflow: hidden;
margin: 0;
padding: 0;
height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.container {
position: relative;
width: 100%;
height: 100%;
}
svg {
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
}
.text {
position: absolute;
top: 20%;
width: 100%;
text-align: center;
font-size: 2em;
color: white;
font-family: 'Arial', sans-serif;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 1200 200" preserveAspectRatio="none">
<path d="M 0,100 C 200,200 400,0 600,100 C 800,200 1000,0 1200,100 L 1200,200 L 0,200 Z"
fill="#ffffff" opacity="0.8">
</path>
</svg>
<div class="text">
Welcome to TutorialsPoint
</div>
</div>
</body>
</html>
A webpage with a gradient background and a white semi-transparent wave at the bottom. The text "Welcome to TutorialsPoint" appears centered above the wave with a text shadow effect.
Method 2: Wave Background Using CSS Properties
In this approach, we create wave effects using pure CSS properties like border-radius, transform, and animations. This method creates pseudo-waves using circular elements.
Key techniques used ?
- We use ::before and ::after pseudo-elements to create circular shapes.
- The border-radius property makes elements circular.
- CSS transform and animation properties create the wave motion.
- Multiple overlapping circles simulate wave patterns.
Example
Here is a complete example creating animated wave background using CSS properties ?
<!DOCTYPE html>
<html>
<head>
<title>CSS Wave Animation</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
overflow: hidden;
}
.wave-container {
position: relative;
width: 100%;
height: 100%;
}
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: #4facfe;
border-radius: 1000px 1000px 0 0;
}
.wave::before {
content: '';
position: absolute;
top: -50px;
left: -50%;
width: 200%;
height: 100px;
background: rgba(255,255,255,0.3);
border-radius: 1000px;
animation: wave-animation 4s ease-in-out infinite;
}
.wave::after {
content: '';
position: absolute;
top: -30px;
left: -50%;
width: 200%;
height: 80px;
background: rgba(255,255,255,0.2);
border-radius: 800px;
animation: wave-animation 3s ease-in-out infinite reverse;
}
@keyframes wave-animation {
0%, 100% { transform: translateX(0) rotate(0deg); }
50% { transform: translateX(-25%) rotate(180deg); }
}
.text {
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-family: 'Arial', sans-serif;
font-size: 2.5em;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="wave-container">
<div class="wave"></div>
<div class="text">Welcome to TutorialsPoint</div>
</div>
</body>
</html>
A webpage with a blue gradient background featuring animated wave effects at the bottom. The waves move smoothly with semi-transparent overlays creating a realistic water effect. The text "Welcome to TutorialsPoint" appears centered above the animated waves.
Comparison
| Method | Pros | Cons | Best Use Case |
|---|---|---|---|
| SVG Method | Precise control, scalable, lightweight | Static by default | Custom wave shapes, print media |
| CSS Properties | Pure CSS, easy animations, no external files | Limited wave shapes | Animated backgrounds, interactive effects |
Conclusion
Both SVG and CSS property methods offer effective ways to create wave backgrounds. SVG provides more precise control over wave shapes, while CSS properties enable smooth animations and are purely CSS-based. Choose the method that best fits your project's requirements for scalability, animation, and design complexity.
5K+ Views
