How to Create Gradient Realistic Ball using Html and CSS

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;

}


How to Create Gradient Realistic Ball using Html and CSS
4/ 5
Oleh

No comments: