CodePen Embed - 🎮 CSS Nintendo Switch (Box shadow + Gradient practice)

<body>
  <div class="container">
    <div class="switch-container">
      <div class="switch">
        <div class="joycon-blue">
          <div class="select-btn"></div>
          <div class="joystick"></div>
          <div class="button-group">
            <div class="button left"></div>
            <div class="button right"></div>
            <div class="button up"></div>
            <div class="button down"></div>
          </div>
          <div class="capture-btn"></div>
          <div class="shoulder left"></div>
        </div>
        <div class="screen">
          <div class="game-video">
            <video width="475" height="280" autoplay playsinline muted loop>
              <source src="https://assets.codepen.io/2792757/Animal+Crossing+New+Horizons+-+Introduction.mp4" type="video/mp4" />
            </video>
          </div>
          <div class="glass-overlay"></div>
        </div>
        <div class="joycon-red">
          <div class="start-btn"></div>
          <div class="joystick"></div>
          <div class="button-group">
            <div class="button x"></div>
            <div class="button a"></div>
            <div class="button b"></div>
            <div class="button y"></div>
          </div>
          <div class="home-btn"></div>
          <div class="shoulder right"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

$bg: paleturquoise;
$switch-blue: #00c3e3;
$switch-red: #ff4554;
$switch-btn: #414548;
$switch-btn-light: #989898;
$switch-border-radius: 75px;
$switch-width: 750px;
$switch-height: 320px;
$switch-joycon-width: 15%;

@mixin center {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

@mixin button {
  position: absolute;
  width: 45%;
  height: 45%;
  background-color: $switch-btn;
  border-radius: 100%;
  box-shadow: inset 0 -0.0625em 0.125em rgba(black, 0.75),
    inset 0 0.125em 0.125em -0.0625em rgba(white, 0.4),
    0 0 0.03125em 0.0625em rgba(black, 0.6),
    0 0.0625em 0.25em 0.03125em rgba(black, 0.5);
  color: rgba(white, 0.5);
  transform: scale(1.1);
}

@mixin joystick {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: $switch-btn;
  left: calc(50% - 25px);
  border-radius: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.14em 100%, 100% 0.14em, 100%;
  background-image: linear-gradient(to bottom, #222, #111),
    linear-gradient(to bottom, #222, #333),
    linear-gradient(to bottom, #777, #111);
  box-shadow: inset 0 -0.06em 0.125em black,
    inset 0 0.125em 0.125em -0.0325em rgba(black, 0.2),
    inset 0 0.18em 0.125em -0.0625em rgba(white, 0.3),
    0 0 0.09em 0.0625em rgba(black, 0.75),
    0 0.375em 1em 0.0625em rgba(black, 0.4);

  &:before,
  &:after {
    content: "";
    position: absolute;
    width: 75%;
    height: 75%;
    border-radius: 100%;
    left: 12%;
    top: 12%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: linear-gradient(to bottom, #555, #222);
  }

  &:before {
    width: 85%;
    height: 85%;
    left: 7%;
    top: 7%;
    background-size: 0.14em 100%, 100% 0.14em, 100%;
    background-image: linear-gradient(to bottom, #444, #111),
      linear-gradient(to bottom, #222, #333),
      linear-gradient(to bottom, #222, #666);
  }
}

@mixin shoulder {
  position: absolute;
  z-index: -1;
  top: -0.25em;
  width: 6.5em;
  height: 4.5em;
  background-color: #414548;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: $bg;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
  @include center;
}

// .switch-container {
//   width: 100%;
//   height: 100%;
//   overflow: hidden;
//   display: grid;
//   place-content: center;
//   transform-origin: center;
//   transform: rotate(20deg) skewX(-35deg) scale(0.8);
//   perspective: 800px;
// }
.switch {
  @include center;
  width: $switch-width;
  height: $switch-height;
  border-radius: $switch-border-radius;
  display: grid;
  grid-template-columns: $switch-joycon-width 1fr $switch-joycon-width;

  > * {
    position: relative;
  }

  .joycon-blue > div,
  .joycon-red > div {
    position: relative;
  }
  .joycon-blue {
    height: 100%;
    background-color: $switch-blue;
    box-shadow: inset 0.125em -0.125em 0.3em rgba(#444, 0.4),
      inset -0.3em 0 0.0625em -0.25em rgba(#222, 0.5),
      inset 0.4em 0.5em 0.5em -0.25em rgba(#fff, 0.6),
      0.04em 0.25em 0 -0.3em #333;
    border-top-left-radius: $switch-border-radius;
    border-bottom-left-radius: $switch-border-radius;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 5px;

    .select-btn {
      width: 20px;
      height: 6px;
      background-color: $switch-btn;
      left: 72%;
      top: 10%;
      border-radius: 0.0675em;
      box-shadow: inset 0 -0.03125em 0.0625em rgba(black, 0.5),
        inset 0 0.03125em rgba(white, 0.2),
        0 0 0.03125em 0.03125em rgba(black, 0.5),
        0 0.09125em 0.125em -0.03125em rgba(black, 0.4);
    }

    .joystick {
      top: 18%;
      @include joystick();
    }

    .button-group {
      width: 45px;
      height: 45px;
      left: calc(50% - 32.5px);
      top: 26%;

      .button {
        @include button;
        &:after {
          content: "";
        }

        &.up {
          top: 0;
          left: 50%;
          &:after {
            @include center;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            border-bottom: 8px solid #222;
          }
        }
        &.down {
          top: 100%;
          left: 50%;
          &:after {
            @include center;

            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            border-top: 8px solid #222;
          }
        }
        &.left {
          top: 50%;
          left: 0;
          &:after {
            @include center;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-right: 8px solid #222;
          }
        }
        &.right {
          top: 50%;
          left: 100%;
          &:after {
            @include center;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 8px solid #222;
          }
        }
      }
    }

    .capture-btn {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: $switch-btn;
      bottom: 22%;
      left: 60%;
      border-radius: 0.125em;
      box-shadow: inset 0 0.25em 0.5em -0.0625em rgba(white, 0.1),
        inset 0 0.015em 0.03125em rgba(white, 0.4),
        inset 0 0 0.03125em 0.03125em black,
        0 0.015em 0 0.03125em rgba(black, 0.75),
        0 0.015em 0.05em 0.0625em rgba(black, 0.5);

      &:after {
        content: "";
        width: 14px;
        height: 14px;
        position: absolute;
        @include center;
        border-radius: 100%;
        background-image: linear-gradient(to bottom, #222, #333);
        box-shadow: inset 0 0.0125em 0 0.03125em rgba(black, 0.6),
          inset 0 -0.0125em 0 0.06125em rgba(white, 0.4),
          0.015em -0.03125em 0.0125em rgba(black, 0.7);
      }
    }

    .shoulder.left {
      @include shoulder;
      left: -0.25em;
      border-radius: 6em 1em 0 0;
    }
  }

  .screen {
    background-color: $switch-btn;
    border-radius: 10px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: inset 0 -1.25em 0.5em -1em rgba(black, 0.5),
      inset 0.125em 0 rgba(white, 0.2), inset -0.125em 0 rgba(white, 0.2);
    &:before,
    &:after {
      content: "";
      position: absolute;
      width: 100%;
    }

    &:before {
      height: 15px;
      background-image: linear-gradient(
        to bottom,
        $switch-btn,
        rgba($switch-btn-light, 0.4),
        $switch-btn
      );
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      box-shadow: inset 0.125em 0 rgba(white, 0.2),
        inset -0.125em 0 rgba(white, 0.2);
    }
  }

  .game-video {
    width: 88%;
    height: 85%;
    // background-image: url("https://media.discordapp.net/attachments/506231578855473153/758132879309668373/IMG_94f9127d-00d7-4f83-b456-d6649e25a73c.png");
    // background-size: cover;
    @include center;
    border-radius: 10px;

    video {
      position: absolute;
      top: 0;
    }
  }
  .glass-overlay {
    @include center;
    $dark-blue: darken($bg, 10%);
    $alpha: 0.3;
    box-sizing: border-box;
    width: 93%;
    height: 92%;
    // background-color: $bg;
    border-top: 25px solid black;
    border-bottom: 25px solid black;
    border-left: 35px solid black;
    border-right: 35px solid black;
    border-radius: 10px;
    overflow: hidden;
    background-size: 420px 100%, 100px 100px, 10px 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 50% 50%, 50% 0;
    background-image: linear-gradient(
      120deg,
      transparent 20%,
      rgba($dark-blue, $alpha) 20%,
      25%,
      transparent 25%,
      30%,
      rgba(white, $alpha) 30%,
      40%,
      transparent 40%,
      rgba(darken($bg, 10%), $alpha) 40%,
      45%,
      rgba(white, $alpha) 45%,
      48%,
      transparent 48%,
      50%,
      rgba(white, $alpha) 50%,
      rgba(white, $alpha) 70%,
      rgba($dark-blue, $alpha) 70%,
      75%,
      transparent 75%
    );
  }

  .joycon-red {
    height: 100%;
    background-color: $switch-red;
    border-top-right-radius: $switch-border-radius;
    border-bottom-right-radius: $switch-border-radius;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 5px;
    box-shadow: inset -0.125em 0.125em 0.3em rgba(#444, 0.4),
      inset 0.3em 0 0.0625em -0.25em rgba(#222, 0.5),
      inset -0.4em 0.5em 0.5em -0.25em rgba(#fff, 0.6),
      -0.04em 0.25em 0 -0.3em #333;

    .start-btn {
      width: 7px;
      height: 20px;
      background-color: $switch-btn;
      top: 8%;
      left: 15%;
      box-shadow: 0 0 0.03125em rgba(black, 0.6),
        0 0.09375em 0.125em -0.03125em rgba(black, 0.5);

      &:before,
      &:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: $switch-btn;
        border-radius: 0.0675em;
      }

      &:before {
        height: 7px;
        width: 20px;
        box-shadow: inset 0 -0.03125em 0.0625em rgba(black, 0.5),
          inset 0 0.03125em rgba(white, 0.2),
          0 0 0.03125em 0.03125em rgba(black, 0.6),
          0 0.09375em 0.125em -0.03125em rgba(black, 0.4);
      }

      &:after {
        width: 7px;
        height: 20px;
        box-shadow: inset 0 -0.09375em 0.0625em -0.0624em rgba(black, 0.5),
          inset 0 0.03125em rgba(white, 0.2);
      }
    }

    .button-group {
      width: 45px;
      height: 45px;
      left: calc(50% - 32.5px);
      top: -3%;

      .button {
        @include button;
        &:after {
          font-family: "Arial";
          font-size: 0.7em;
        }

        &.x {
          top: 0;
          left: 50%;
          &:after {
            @include center;
            content: "X";
          }
        }
        &.a {
          top: 100%;
          left: 50%;
          &:after {
            @include center;
            content: "A";
          }
        }
        &.b {
          top: 50%;
          left: 0;
          &:after {
            @include center;
            content: "B";
          }
        }
        &.y {
          top: 50%;
          left: 100%;
          &:after {
            @include center;
            content: "Y";
          }
        }
      }
    }

    .joystick {
      top: 40%;
      @include joystick();
    }

    .home-btn {
      position: absolute;
      bottom: 22%;
      width: 20px;
      height: 20px;
      left: 20%;
      background-color: #444;
      border-radius: 100%;
      box-shadow: inset 0 0 0 0.09em #9b9b9b,
        inset 0 0.25em 0.5em rgba(white, 0.2),
        inset 0 0 0.03125em rgba(black, 1),
        0 0.0155em 0.03125em 0.0625em rgba(black, 0.6);

      &:before,
      &:after {
        content: "";
        position: absolute;
        transform: translate(-50%, -50%) scale(1.15);
        top: 50%;
        left: 50%;
        display: block;
        box-sizing: border-box;
      }

      &:before {
        height: 6px;
        width: 7px;
        background-color: #444;
        border: 0.025em solid #111;
        box-shadow: inset 0 0 0 0.1em #111, inset 0.12em 0 0 #111,
          inset -0.12em 0 0 #111, 0 0.0625em 0 -0.03125em rgba(white, 0.1);
      }

      &:after {
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-bottom: 4px solid #111;
        top: 30%;
      }
    }

    .shoulder.right {
      @include shoulder;
      right: -0.25em;
      border-radius: 1em 6em 0 0;
    }
  }
}

View Compiled

// Special thanks to @joshbadder on Codepen: https://codepen.io/joshbader/pen/mjZzGM
// Checkout my YouTube and Instagram for more contnet!
// YouTube: https://youtube.com/c/Cybercountess
// Instagram: https://instagram.com/cybercountess

This Pen is owned by Elisabeth Diang on CodePen.

See more by @elisabethdiang on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.