2048 Dark Theme, 3D tiles

better-2048-theme-dark-3d.css

body {
  background: #000;
}

.game-container {
  background: #444;
}

.grid-cell {
  background: #333;
  box-shadow: 0 0 10px inset #000;
}

.tile {
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-top: -4px;
}

.tile .tile-inner {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* CSS extrusion */
.tile:before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  top: 6px;
  border-radius: 7px;
  height: 100%;
  background: linear-gradient(to top, #4c4c4c 0%, #7c7c7c 6px);
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.5);
}

/* Fade the background for new tiles */
.tile.tile-merged:before,
.tile.tile-new:before {
  animation: fadePop 400ms;
}
/* Fade the sheen overlay for new tiles */
.tile.tile-merged:after,
.tile.tile-new:after {
  animation: fadeIn 300ms;
}

/* Overlay sheen */
.tile:after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  top: 0;
  border-radius: 3px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 50%
  );
}

.tile .tile-inner {
  box-shadow: inset 0 0 20px red;
}

.tile.tile-2 {
  text-shadow: none;
}
.tile.tile-2 .tile-inner {
  box-shadow: inset 0 0 10px #999;
}

.tile.tile-4 {
  text-shadow: none;
}
.tile.tile-4 .tile-inner {
  box-shadow: inset 0 0 10px #cc6b6b, inset 0 1px 1px rgba(255, 255, 255, 1);
}
.tile.tile-4:before {
  background: linear-gradient(to top, #914c4c 0%, #8d4a4a 6px);
}
.tile.tile-8:before {
  background: linear-gradient(to top, #955c41 0%, #886537 6px);
}
.tile.tile-16:before {
  background: linear-gradient(to top, #914c4c 0%, #8d4a4a 6px);
}
.tile.tile-32:before {
  background: linear-gradient(to top, #914c4c 0%, #8d4a4a 6px);
}
.tile.tile-64:before {
  background: linear-gradient(to top, #7a3030 0%, #952727 6px);
}

.tile.tile-128 .tile-inner {
  box-shadow: inset 0 0 10px #ff7100;
}
.tile.tile-128:before {
  background: linear-gradient(to top, #917e4c 0%, #8d744a 6px);
}
.tile.tile-256:before {
  background: linear-gradient(to top, #917e4c 0%, #8d744a 6px);
}
.tile.tile-512:before {
  background: linear-gradient(to top, #917e4c 0%, #8d744a 6px);
}

.tile.tile-1024 .tile-inner {
  background: #037043;
  color: #fff;
  box-shadow: inset 0 0 20px #00d0ff;
  text-shadow: 0 0 5px #41ffb6;
}
.tile.tile-1024:before {
  background: linear-gradient(to top, #024126 0%, #037043 6px);
}

.tile.tile-2048 .tile-inner {
  background: #3a036b;
  color: #fff;
  box-shadow: inset 0 0 20px #509ef0;
  text-shadow: 0 0 6px #c4dcf7;
}
.tile.tile-2048:before {
  background: linear-gradient(to top, #18012b 0%, #2c1db5 6px);
}

.tile.tile-4096 .tile-inner {
  background: #4e021f;
  color: #fff;
  box-shadow: inset 0 0 20px #f14747;
  text-shadow: 0 0 6px #ff0000;
}
.tile.tile-4096:before {
  background: linear-gradient(to top, #4e021f 0%, #b81f1f 6px);
}

.tile.tile-8192 .tile-inner {
  background: #1f4000;
  color: #fff;
  box-shadow: inset 0 0 10px #cdff00;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadePop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0;
    transform: scale(0);
  }
  75% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Stop the page CSS from overwriting the "user css" chrome plugin editor styles */
#ucss-code-wrapper,
#ucss-code-wrapper div {
  color: #000;
  background: #fff;
}

#ucss-code-wrapper div.ucss-panel {
  background: #000;
  color: #000;
}

#ucss-code-wrapper div.ucss-toggle {
  background: #f00;
  color: #000;
}