Cat and the moon (Only CSS gradients)

HTML
<div class="catluna"></div>
CSS
body{ background:black; } .catluna{ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 500px; height: 500px; border: none; -webkit-border-radius: 100%; border-radius: 100%; font: normal 1px/normal Arial, Helvetica, sans-serif; color: rgba(255,255,255,1); -o-text-overflow: clip; text-overflow: clip; background: -webkit-radial-gradient(77% 30%, circle closest-side, rgba(237,237,237,1) 0, rgba(237,237,237,1) 2%, rgba(237,237,237,0) 8%, rgba(237,237,237,0) 100%), -webkit-radial-gradient(21% 30%, circle closest-side, rgba(237,237,237,1) 0, rgba(237,237,237,1) 3%, rgba(237,237,237,0) 9%, rgba(237,237,237,0) 100%), -webkit-radial-gradient(50% 75%, closest-side, rgba(5,5,5,1) 0, rgba(5,5,5,1) 1%, rgba(45,45,45,1) 16%, rgba(95,95,95,0) 19%, rgba(95,95,95,0) 100%), -webkit-linear-gradient(90deg, rgba(40,12,58,1) 0, rgba(40,12,58,1) 22%, rgba(193,70,161,0) 24%, rgba(193,70,161,0) 100%), -webkit-radial-gradient(50% 21%, circle closest-side, rgba(255,255,255,1) 0, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 44%, rgba(243,243,243,0) 76%, rgba(243,243,243,0) 100%), -webkit-radial-gradient(50% 67%, circle closest-side, rgba(0,0,0,1) 0, rgba(21,21,21,1) 18%, rgba(43,41,41,1) 33%, rgba(30,30,30,0) 35%, rgba(30,30,30,0) 51%, rgba(30,30,30,0) 100%), -webkit-radial-gradient(closest-side, rgba(0,0,0,1) 0, rgba(21,21,21,1) 12%, rgba(43,41,41,1) 17%, rgba(30,30,30,0) 18%, rgba(30,30,30,0) 100%), -webkit-linear-gradient(-210deg, #000000 0, #151515 12%, #2d2d2d 20%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 100%), -webkit-linear-gradient(30deg, #000000 0, #151515 12%, #2d2d2d 21%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 100%), #551d7c; background: -moz-radial-gradient(77% 30%, circle closest-side, rgba(237,237,237,1) 0, rgba(237,237,237,1) 2%, rgba(237,237,237,0) 8%, rgba(237,237,237,0) 100%), -moz-radial-gradient(21% 30%, circle closest-side, rgba(237,237,237,1) 0, rgba(237,237,237,1) 3%, rgba(237,237,237,0) 9%, rgba(237,237,237,0) 100%), -moz-radial-gradient(50% 75%, closest-side, rgba(5,5,5,1) 0, rgba(5,5,5,1) 1%, rgba(45,45,45,1) 16%, rgba(95,95,95,0) 19%, rgba(95,95,95,0) 100%), -moz-linear-gradient(0deg, rgba(40,12,58,1) 0, rgba(40,12,58,1) 22%, rgba(193,70,161,0) 24%, rgba(193,70,161,0) 100%), -moz-radial-gradient(50% 21%, circle closest-side, rgba(255,255,255,1) 0, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 44%, rgba(243,243,243,0) 76%, rgba(243,243,243,0) 100%), -moz-radial-gradient(50% 67%, circle closest-side, rgba(0,0,0,1) 0, rgba(21,21,21,1) 18%, rgba(43,41,41,1) 33%, rgba(30,30,30,0) 35%, rgba(30,30,30,0) 51%, rgba(30,30,30,0) 100%), -moz-radial-gradient(closest-side, rgba(0,0,0,1) 0, rgba(21,21,21,1) 12%, rgba(43,41,41,1) 17%, rgba(30,30,30,0) 18%, rgba(30,30,30,0) 100%), -moz-linear-gradient(300deg, #000000 0, #151515 12%, #2d2d2d 20%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 100%), -moz-linear-gradient(60deg, #000000 0, #151515 12%, #2d2d2d 21%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 100%), #551d7c; background: radial-gradient(circle closest-side at 77% 30%, rgba(237,237,237,1) 0, rgba(237,237,237,1) 2%, rgba(237,237,237,0) 8%, rgba(237,237,237,0) 100%), radial-gradient(circle closest-side at 21% 30%, rgba(237,237,237,1) 0, rgba(237,237,237,1) 3%, rgba(237,237,237,0) 9%, rgba(237,237,237,0) 100%), radial-gradient(closest-side at 50% 75%, rgba(5,5,5,1) 0, rgba(5,5,5,1) 1%, rgba(45,45,45,1) 16%, rgba(95,95,95,0) 19%, rgba(95,95,95,0) 100%), linear-gradient(0deg, rgba(40,12,58,1) 0, rgba(40,12,58,1) 22%, rgba(193,70,161,0) 24%, rgba(193,70,161,0) 100%), radial-gradient(circle closest-side at 50% 21%, rgba(255,255,255,1) 0, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 44%, rgba(243,243,243,0) 76%, rgba(243,243,243,0) 100%), radial-gradient(circle closest-side at 50% 67%, rgba(0,0,0,1) 0, rgba(21,21,21,1) 18%, rgba(43,41,41,1) 33%, rgba(30,30,30,0) 35%, rgba(30,30,30,0) 51%, rgba(30,30,30,0) 100%), radial-gradient(closest-side, rgba(0,0,0,1) 0, rgba(21,21,21,1) 12%, rgba(43,41,41,1) 17%, rgba(30,30,30,0) 18%, rgba(30,30,30,0) 100%), linear-gradient(300deg, #000000 0, #151515 12%, #2d2d2d 20%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 100%), linear-gradient(60deg, #000000 0, #151515 12%, #2d2d2d 21%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 100%), #551d7c; background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-position: 50% 50%, 50% 50%, 12% 77%, 50% 50%, 50% 50%, 50% 90%, 50% 50%, 224px 142px, 213px 142px; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto, auto auto, 124% 90%, auto auto, auto auto, auto auto, auto auto, 63em 83em, 63em 83em; background-size: auto auto, auto auto, 124% 90%, auto auto, auto auto, auto auto, auto auto, 63em 83em, 63em 83em; margin: 221px auto; }
JAVASCRIPT
Expand for more options Login