You are currently viewing Create Wave Backgrounds with CSS

Create Wave Backgrounds with CSS

Create Wave Backgrounds with CSS

Welcome to the CodeWithRandom blog. In this article, we learn how to create a Wave Background using Html and Css coding. Wave Background css is a trending UI design in CSS.

Many developers use wave background in the header pages many developers use wave background in the footer. So let’s create wave background html css coding.

100+ Front-end Projects for Web developers (Source Code)

Video Tutorial Of Wave Background Css

Hope you enjoy our blog so let’s start with a basic HTML structure for the Simple Waves background Css. 

Html Code Wave Background

<!--Hey! This is the original version
of Simple CSS Waves-->
<div class="header">
<!--Content before waves-->
<div class="inner-header flex">
<!--Just the logo.. Don't mind this-->
<h1>Simple CSS Waves</h1>
</div>
<!--Waves Container-->
<div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
<!--Waves end-->
</div>
<!--Header ends-->
<!--Content starts-->
<!--Content ends-->

There is all html code for the wave background css. Now, you can see output without css, then we write css for the wave background css.

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

Output wave background css

wave background css
wave background css

CSS code For Wave Background

@import url(//fonts.googleapis.com/css?family=Lato:300:400);
body {
margin:0;
}
h1 {
font-family: 'Lato', sans-serif;
font-weight:300;
letter-spacing: 2px;
font-size:48px;
}
p {
font-family: 'Lato', sans-serif;
letter-spacing: 1px;
font-size:14px;
color: #333333;
}
.header {
position:relative;
text-align:center;
background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
color:white;
}
.logo {
width:50px;
fill:white;
padding-right:15px;
display:inline-block;
vertical-align: middle;
}
.inner-header {
height:65vh;
width:100%;
margin: 0;
padding: 0;
}
.flex { /*Flexbox for containers*/
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.waves {
position:relative;
width: 100%;
height:15vh;
margin-bottom:-7px; /*Fix for safari gap*/
min-height:100px;
max-height:150px;
}
.content {
position:relative;
height:20vh;
text-align:center;
background-color: white;
}
/* Animation */
.parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
height:40px;
min-height:40px;
}
.content {
height:30vh;
}
h1 {
font-size:24px;
}
}

Now we have completed our CSS section for wave background. Here is our final updated output wave background CSS.

Final Output wave background Css

wave background css
wave background css

 

Now we have completed our CSS section Wave Background,  Here is our updated output with Wave Background CSS. Hope you like the Wave Background CSS, you can see output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you.

Ecommerce Website Using Html Css And Javascript Source Code

In this post, we learn how to create a Wave Background CSS  using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Goodkatz

FAQ For Wave Background Css


Coding Language Used
Name of Coding language
1 HTML
2 CSS
Wave Background Css

What Coding language do you use for this Wave Background Css?

I Use Html For Creating The Structure Of The Wave Background And For Styling I Use Css. And For The Main Functionality, I Use Javascript Code For A Wave Background Animation.

Where we can use this wave 🌊 background css in the project?

You can use it in many ways like you can include it in the header, the home page, the landing page also you can add these css background waves in the footer.

Leave a Reply