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.
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.
Output 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
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.
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
Some related topics -
add-to-cart-button-animation-add-to-cart-button-html-css-javascript
age-calculator-javascript-age-calculator-using-html-css-javascript
dinogame-dino-game-using-html-css-javascript-chrome-dinogame
number-guessing-game-javascript-number-guess-game-javascript-game