How to Create Gradient Realistic Ball using Html and CSS
#CSS #CSSBall #CSSAnimation
Description:
Here learn How to Create Gradient Realistic Ball using Html and CSS very simple method and easy like gradient text animation.
I hope this tutorial will help you know a little bit in CSS
Source Code
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>gradient ball </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="ball"></div>
</div>
</body>
</html>
CSS
.container {
width: 98vw;
height: 97vh;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.container .ball {
background: lightgray;
width: 400px;
height: 400px;
border-radius: 50%;
}
.container .ball::before {
background-image: radial-gradient(circle at 35% 28%, #00ff8f, #00a1ff);
content: "";
width: 400px;
height: 400px;
border-radius: 50%;
z-index: 0;
position: absolute;
box-shadow: 0 10px 2px -10px #2e6789,
35px 90px 210px 2px #36779d,
45px 65px 50px -35px #36779d;
}
.container .ball::after {
background-image: radial-gradient(circle at 38% 40%, #00ff8f, #00a1ff);
content: "";
width: 400px;
height: 400px;
border-radius: 50%;
z-index: 0;
position: absolute;
}