body {
  padding: 200px;
}
.moon {
  height: 200px;
  width: 200px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg?utm_source=en.wikipedia.org&utm_campaign=parser&utm_content=thumbnail");
  background-position: center;
  border-radius: 200px;
  filter: brightness(1) drop-shadow(0 0 6px #f1c40f) drop-shadow(0 0 15px #f39c12);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.moon.active {
  transform: rotate(45deg);
  filter: brightness(0) drop-shadow(0 0 6px black) drop-shadow(0 0 15px black);
}