Hello, guys in this tutorial we will create Real Glass Effect With SVG Animation
Common Query
- how to create glassmorphic effects in HTML & CSS
- How to create SVG animation
- how to create the glass effect
- SVG background animation
Hello, guys In this tutorial we will try to solve above mention query. and also we will create glassmorphic effects in HTML & CSS.
First, we need to create three files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SVG Animation Background With Glass Effect</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="page-Wrap">
<div id="bg-wrap">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
<animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(255, 0, 255, 1)"></stop>
<stop offset="100%" stop-color="rgba(255, 0, 255, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5">
<animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(255, 255, 0, 1)"></stop>
<stop offset="100%" stop-color="rgba(255, 255, 0, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5">
<animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(0, 255, 255, 1)"></stop>
<stop offset="100%" stop-color="rgba(0, 255, 255, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient4" cx="50%" cy="50%" fx="4.56417%" fy="50%" r=".5">
<animate attributeName="fx" dur="23s" values="0%;5%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(0, 255, 0, 1)"></stop>
<stop offset="100%" stop-color="rgba(0, 255, 0, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient5" cx="50%" cy="50%" fx="2.65405%" fy="50%" r=".5">
<animate attributeName="fx" dur="24.5s" values="0%;5%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(0,0,255, 1)"></stop>
<stop offset="100%" stop-color="rgba(0,0,255, 0)"></stop>
</radialGradient>
<radialGradient id="Gradient6" cx="50%" cy="50%" fx="0.981338%" fy="50%" r=".5">
<animate attributeName="fx" dur="25.5s" values="0%;5%;0%" repeatCount="indefinite"></animate>
<stop offset="0%" stop-color="rgba(255,0,0, 1)"></stop>
<stop offset="100%" stop-color="rgba(255,0,0, 0)"></stop>
</radialGradient>
</defs>
<rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)"
transform="rotate(334.41 50 50)">
<animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite"></animate>
<animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite"></animate>
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s"
repeatCount="indefinite"></animateTransform>
</rect>
<rect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2)"
transform="rotate(255.072 50 50)">
<animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite"></animate>
<animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite"></animate>
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="12s"
repeatCount="indefinite"></animateTransform>
</rect>
<rect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3)"
transform="rotate(139.903 50 50)">
<animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite"></animate>
<animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite"></animate>
<animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="9s"
repeatCount="indefinite"></animateTransform>
</rect>
</svg>
</div>
</div>
<div class="form-outer">
<div class="logo">
<a href="#">
<img src="logo.png" alt="logo">
</a>
</div>
<form action="">
<input type="text" name="name" id="name" placeholder="Enter your name">
<input type="email" name="email" id="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>Step:2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
outline: 0;
color: #444;
font-family: 'IBM Plex Sans', sans-serif;
}
.page-Wrap {
height: 100vh;
width: 100vw;
overflow: hidden;
}
.form-outer {
min-height: 280px;
position: absolute;
top: 25%;
left: 0;
right: 0;
max-width: 280px;
margin: auto;
overflow: hidden;
}
.logo img {
display: block;
width: 100%;
margin-bottom: 30px;
}
.form-outer {
min-height: 280px;
position: absolute;
top: 25%;
left: 0;
right: 0;
max-width: 280px;
margin: auto;
overflow: hidden;
background: rgba(0,0,0,0.125);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid #0f62fe;
border-radius: 8px;
box-shadow: 0 0 10px rgb(0 0 0 / 25%);
padding: 48px 40px 36px;
}
input#email, input#name {
font-size: 16px;
font-weight: 100;
display: block;
border: unset;
border-bottom: 1px solid #d6d6d6;
width: calc(100% - 20px);
height: 50px;
outline: 0;
padding: 0 10px;
color: #162d3d;
background: rgb(213 200 255 / 20%);
margin-bottom: 20px;
}
input[type="submit"] {
background: #0f62fe;
border: 1px solid transparent;
color: #fff;
cursor: pointer;
padding: 10px 0;
width: 100%;
font-size: 16px;
cursor: pointer;
}