Shiny Ball

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shiny Ball</title>
    <style>
      #root {
        width: 500px;
        height: 500px;
        background:
          radial-gradient(ellipse at 50% 50%, rgb(69 255 143 / 0) 49%, rgb(161 220 255 / 1) 49.3%) 0px 0px / 500px 500px no-repeat, /* Mask */
          repeating-radial-gradient(circle at 100% 0%, rgb(69 255 143 / 0) 0%, rgb(69 255 143 / 0) 1.75%, rgb(202 102 212 / 0.1) 1.79%, rgb(202 102 212 / 0.1) 3.57%, rgb(202 102 212 / 0.1) 3.57%) 60px 73px / 370px 363px no-repeat, /* Lines */
          radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / 0) 52%, rgb(91 31 97 / 0.1) 58%) 29px 34px / 420px 420px no-repeat, /* Shadow */
          radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / 0) 47.22%, rgb(91 31 97 / 0.09) 56.25%, rgb(91 31 97 / 0.24) 65.63%, rgb(91 31 97 / 0.52) 76.39%) 10px 30px / 418px 395px no-repeat, /* Shadow */
          radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / 1) 0%, rgb(252 209 194 / 1) 28.61%, rgb(202 102 212 / 1) 77.32%) -107px -88px / 572px 536px no-repeat; /* Background */
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Colors

Views

Code size

Layers

Explore

Community

Social
