A Pen by Jason Neel.

index.html

<figure class="youtube"></figure>

style.css

body {
  background: #E5E5E5;
}
.youtube {
  background-image: linear-gradient(to bottom, #E52D27, #BF171D);
  width: 15em;
  height: 10em;
  border-radius: 2.5em;
  margin: 25vh auto 0 auto;
  box-shadow: 0 0.1875em 0.3125em 0 #8C8B8B;
}
.youtube::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 4em solid #fff;
  border-top: 2em solid transparent;
  border-bottom: 2em solid transparent;
  margin: auto;
  position: relative;
  top: 3em;
  left: 0.3em;
}


.youtube::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 4em solid #aaa;
  border-top: 0.2em solid transparent;
  border-bottom: 0.15em solid transparent;
  margin: auto;
  position: relative;
  top: 0em;
  left: 0.4em;
  transform: rotate(208deg) skewX(-35deg);
}

YouTube-Icon.markdown

YouTube Icon

My attempt at adding an inner shadow to this CSS only YouTube icon, originally created by Jan Reimers (http://codepen.io/reimersjan/details/qKLbC).

A Pen by Jason Neel on CodePen.

License.