<div class="frame">
  <div class="bs_test box_shadow"><p>Basic</p></div>
</div>

<div class="frame">
  <div class="bs_test fadeIn"><p>fadeIn</p></div>
  <div class="bs_test inside_out"><p>From the inside out</p></div>
  <div class="bs_test outside_inside"><p>From outside to inside</p></div>
</div>

<div class="frame">
  <div class="bs_test Float"><p>Float</p></div>
  <div class="bs_test Gradation"><p>Gradation</p></div>
  <div class="bs_test mask"><p>mask</p></div>  
</div>

<div class="frame">
  <div class="bs_test inset"><p>inset</p></div>
</div>

<div class="frame">
  <div class="bs_test inset_outside_inside"><p>From outside to inside</p></div>
  <div class="bs_test inset_inside_out"><p>From the inside out</p></div>
  <div class="bs_test inset_slide"><p>slide</p></div>
  <div class="bs_test inset_slide_down"><p>slide_down</p></div>
  <div class="bs_test inset_slanting"><p>slanting</p>
  </div>
</div>

<div class="frame">
  <div class="bs_test Two-tone_slide"><p>Two-tone slide</p></div>
  <div class="bs_test Up_down"><p>Up and down</p></div>
  <div class="bs_test Three_tone"><p>Three-tone</p></div>
  <div class="bs_test Three_tone_slide"><p>Three-tone slide</p></div>
  <div class="bs_test Three_tone_out_slide"><p>Three-tone out-slide</p>
  </div>
</div>
  
<div class="frame">
  <div class="bs_test four_tone"><div class="four_box_shadow"></div>
    <p>Four-tone</p>
  </div>
  
  <div class="bs_test four_tone_Bubble"><div class="four_box_shadow_2">
    </div>
    <p>Four-tone Bubble</p>
  </div>
  
  <div class="bs_test four_tone_slide">
    <div class="four_box four_box_slide_1"></div>
    <div class="four_box four_box_slide_2"></div>
    <div class="four_box four_box_slide_3"></div>
    <div class="four_box four_box_slide_4"></div>
    <p>Four-tone slide</p>
  </div>
  
  <div class="bs_test four_tone_rotate">
    <div class="four_box_2 four_box_rotate_1"></div>
    <div class="four_box_2 four_box_rotate_2"></div>
    <div class="four_box_2 four_box_rotate_3"></div>
    <div class="four_box_2 four_box_rotate_4"></div>
    <p>Four-tone rotate</p>
  </div>
  
  <div class="bs_test four_tone_Accordion">
    <div class="four_box_Accordion"></div>
    <p>Four-tone Accordion</p>
  </div>
</div>

<div class="frame">
  <div class="bs_test Beyond_the_basics"><p>Beyond the basics</p></div>
</div>

<div class="cycle_menu">
  <ul>
    <li class="cycle menu_1"><p>cycle menu</p></li>
    <li class="cycle menu_2"><p>cycle menu</p></li>
    <li class="cycle menu_3"><p>cycle menu</p></li>
    <li class="cycle menu_4"><p>cycle menu</p></li>
    <li class="cycle menu_5"><p>cycle menu</p></li>
    <li class="cycle menu_6"></li>
  </ul>
</div>

<div class="clr"></div>

<div class="box_menu">
  <ul>
    <li class="box_menu_1"><p>menu</p></li>
    <li class="box_menu_2"><p>menu</p></li>
    <li class="box_menu_3"><p>menu</p></li>
    <li class="box_menu_4"><p>menu</p></li>
    <li class="box_menu_5"><p>menu</p></li>
  </ul>
</div>
.frame{
  display:inline-table;
  border-collapse:separate;
  border-spacing:20px;
  max-width:1020px;
  width:1020px;
}
.bs_test{
  max-width:200px;
  min-width:200px;
  width:200px;
  max-height:200px;
  min-height:200px;
  height:200px;
  display:table-cell;
  vertical-align:middle;  
  text-align:center;
  border:1px solid #000;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  transition:0.5s;
}
.bs_test p{
  font-weight:bold;
  display:inline-block;
  vertical-align:middle;
  font-size:22px;
  padding:0 10px;
  z-index:10;
}

.clr{
  clear:both;  
}

/* box-shadow-transition sample 100 start */

/* basic */

.box_shadow{
  box-shadow:0 0 3px 3px rgba(0,0,0,0);
}
.box_shadow:hover{
  box-shadow:0 0 3px 3px rgba(0,0,0,1);
}

/* ------------------------ */

.fadeIn{
  box-shadow:0 0 0 50px rgba(255,0,0,0);
}
.fadeIn:hover{
  box-shadow:0 0 0 50px rgba(255,0,0,1);
}

/* ------------------------ */

.inside_out{
  box-shadow:0 0 0 0px rgba(255,0,0,0);
}
.inside_out:hover{
  box-shadow:0 0 0 50px rgba(255,0,0,1);
}

/* ------------------------ */

.outside_inside{
  box-shadow:0 0 0 50px rgba(255,0,0,0);
}
.outside_inside:hover{
  box-shadow:0 0 0 0px rgba(255,0,0,1);
}

/* ------------------------ */

.Float{
  box-shadow:0 0 0 0px rgba(0,0,0,0);
  top:0px;
}
.Float:hover{
  box-shadow:0 80px 50px -60px rgba(0,0,0,0.5);
  position:relative;
  top:-20px;
}

/* ------------------------ */

.Gradation{
  box-shadow:0 0 0 50px rgba(0,0,0,0);
}
.Gradation:hover{
  box-shadow:0 0 0 50px rgba(0,0,0,0.1),0 0 0 20px rgba(0,0,0,0.2),0 0 0 30px rgba(0,0,0,0.3),0 0 0 40px rgba(0,0,0,0.4),0 0 0 50px rgba(0,0,0,0.5); 
}

/* ------------------------ */

.mask{
  box-shadow:0 0 0 2000px rgba(0,0,0,0);
}
.mask:hover {
  box-shadow:0 0 0 2000px rgba(0,0,0,0.5);
}


/* ------------basic_end------------ */

/* inset sample */

.inset{
  box-shadow:0 0 0 100px rgba(0,0,0,0) inset;
  position:relative;
}
.inset:hover{
  box-shadow:0 0 0 100px rgba(0,0,0,1) inset;
  color:#fff;
}

/* ------------------------ */

.inset_outside_inside{
  box-shadow:0 0 0 0 rgba(255,0,0,0) inset;
}
.inset_outside_inside:hover{
  box-shadow:0 0 0 100px rgba(255,0,0,0.5) inset;
}

/* ------------------------ */

.inset_inside_out{
  box-shadow:0 0 0 100px rgba(255,0,0,0.5) inset;
}

.inset_inside_out:hover{
  box-shadow:0 0 0 0 rgba(255,0,0,0) inset;  
}

/* ------------------------ */

.inset_slide{
  box-shadow:0 0 0 0 rgba(255,0,0,0.5) inset;  
}

.inset_slide:hover{
  box-shadow:200px 0 0 0px rgba(255,0,0,0.5) inset;
}

/* ------------------------ */

.inset_slide_down{
  box-shadow:0 0 0 0 rgba(255,0,0,0.5) inset;
}
.inset_slide_down:hover{
  box-shadow:0 200px 0 0px rgba(255,0,0,0.5) inset;
}

/* ------------------------ */

.inset_slanting{
  box-shadow:0 0 0 0 rgba(255,0,0,0.5) inset;
}
.inset_slanting:hover{
  box-shadow:200px 200px 0 0px rgba(255,0,0,0.5) inset;  
}

/* ------------------------ */

.Two-tone_slide{
  box-shadow:0 0 0 0 rgba(255,0,0,0) inset;
}
.Two-tone_slide:hover{
  box-shadow:100px 0 0 0 rgba(255,0,0,1) inset,-100px 0 0 0 rgba(0,0,0,1) inset;
  color:#fff;
}

/* ------------------------ */

.Up_down{
  box-shadow:0 0 0 0 rgba(255,0,0,0) inset;
}
.Up_down:hover{
  box-shadow:0 100px 0 0 rgba(255,0,0,1) inset,0 -100px 0 0 rgba(0,0,0,1) inset;
  color:#fff;
}

/* ------------------------ */

.Three_tone{
  box-shadow:100px 0 0 0 rgba(0,0,0,0) inset,100px 100px 0 0 rgba(255,0,0,0) inset, -100px 100px 0 0 rgba(0,255,0,0) inset;
}
.Three_tone:hover{
  box-shadow:100px 0 0 0 rgba(0,0,0,1) inset,100px 100px 0 0 rgba(255,0,0,1) inset, -100px 100px 0 0 rgba(0,255,0,1) inset;
  color:#fff;
}

/* ------------------------ */

.Three_tone_slide{
  box-shadow:0 0 0 0 rgba(0,0,0,0) inset,0 0 0 0 rgba(255,0,0,0) inset, 0 0 0 0 rgba(0,255,0,0) inset;
}
.Three_tone_slide:hover{
  box-shadow:100px 0 0 0 rgba(0,0,0,1) inset,100px 100px 0 0 rgba(255,0,0,1) inset, -100px 100px 0 0 rgba(0,255,0,1) inset;
  color:#fff;
  text-shadow:1px 1px 3px #000;
}

/* ------------------------ */

.Three_tone_out_slide{
  box-shadow:100px 0 0 0 rgba(0,0,0,1) inset,100px 100px 0 0 rgba(255,0,0,1) inset, -100px 100px 0 0 rgba(0,255,0,1) inset,0 0 0 100px rgba(0,0,0,1) inset;
  color:#fff;
  text-shadow:1px 1px 3px #000;
}
.Three_tone_out_slide:hover{
  box-shadow:0 0 0 0 rgba(0,0,0,1) inset,0 0 0 0 rgba(255,0,0,1) inset, 0 0 0 0 rgba(0,255,0,1) inset,0 0 0 100px rgba(0,0,0,0) inset;
  color:#333;
}

/* ------------inset_end------------ */

.four_tone{
  position:relative;
}

.four_box_shadow{
  display:inline-block;
  position:absolute;
  top:50px;
  left:50px;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  transition:0.5s;
  box-shadow:0 0 0 50px rgba(0,0,0,0),100px 0 0 50px rgba(255,0,0,0),0 100px 0 50px rgba(0,255,0,0),100px 100px 0 50px rgba(0,0,255,0);
}

.four_tone:hover > .four_box_shadow {
  box-shadow:0 0 0 50px rgba(0,0,0,1),100px 0 0 50px rgba(255,0,0,1),0 100px 0 50px rgba(0,255,0,1),100px 100px 0 50px rgba(0,0,255,1);
}

.four_tone_Bubble{
  position:relative;
}

.four_box_shadow_2{
  display:inline-block;
  position:absolute;
  top:50px;
  left:50px;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  transition:0.5s;
  box-shadow:0 0 0 0px rgba(0,0,0,0),100px 0 0 0px rgba(255,0,0,0),0 100px 0 0px rgba(0,255,0,0),100px 100px 0 0px rgba(0,0,255,0);
}

.four_tone_Bubble:hover > .four_box_shadow_2 {
  box-shadow:0 0 0 50px rgba(0,0,0,1),100px 0 0 50px rgba(255,0,0,1),0 100px 0 50px rgba(0,255,0,1),100px 100px 0 50px rgba(0,0,255,1);
}

/* ------------------------ */

.four_tone_slide{
  position:relative;
  overflow:hidden;
}

.four_box{
  display:inline-block;
  position:absolute;
  top:0px;
  left:0px;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  transition:0.5s;
}

.four_box_slide_2{
  box-shadow:300px -100px 0 100px rgba(255,0,0,0);
}
.four_box_slide_3{
  box-shadow:-100px 300px 0 100px rgba(0,255,0,0);
}
.four_box_slide_4{
  box-shadow:300px 300px 0 100px rgba(0,0,255,0);
}

.four_tone_slide:hover > .four_box_slide_1 {
  box-shadow:0 0 0 100px rgba(0,0,0,1);
}
.four_tone_slide:hover > .four_box_slide_2 {
  box-shadow:200px 0 0 100px rgba(255,0,0,1);
}
.four_tone_slide:hover > .four_box_slide_3 {
  box-shadow:0 200px 0 100px rgba(0,255,0,1);
}
.four_tone_slide:hover > .four_box_slide_4 {
  box-shadow:200px 200px 0 100px rgba(0,0,255,1);
}

/* ------------------------ */

.four_tone_rotate{
  position:relative;
  overflow:hidden;
}

.four_box_2{
  display:inline-block;
  position:absolute;
  top:0px;
  left:0px;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  transition:0.5s;
}

.four_box_rotate_1{
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  transform:rotate(90deg);
}
.four_box_rotate_2{
  box-shadow:300px -100px 0 100px rgba(255,0,0,0);
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  transform:rotate(90deg);
}
.four_box_rotate_3{
  box-shadow:-100px 300px 0 100px rgba(0,255,0,0);
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  transform:rotate(90deg);
}
.four_box_rotate_4{
  box-shadow:300px 300px 0 100px rgba(0,0,255,0);
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  transform:rotate(90deg);
}

.four_tone_rotate:hover > .four_box_rotate_1 {
  box-shadow:0 0 0 100px rgba(0,0,0,1);
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  transform:rotate(0deg);
}
.four_tone_rotate:hover > .four_box_rotate_2 {
  box-shadow:200px 0 0 100px rgba(255,0,0,1);
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  transform:rotate(0deg);
}
.four_tone_rotate:hover > .four_box_rotate_3 {
  box-shadow:0 200px 0 100px rgba(0,255,0,1);
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  transform:rotate(0deg);
}
.four_tone_rotate:hover > .four_box_rotate_4 {
  box-shadow:200px 200px 0 100px rgba(0,0,255,1);
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  transform:rotate(0deg);
}

/* ------------------------ */

.four_tone_Accordion{
  position:relative;
  overflow:hidden;
}
.four_box_Accordion{
  display:inline-block;
  position:absolute;
  top:0px;
  left:0px;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  transition:0.5s;
  box-shadow:0 0 0 200px rgba(0,0,0,0),0 0 0 200px rgba(255,0,0,0),0 0 0 200px rgba(0,255,0,0),0 0 0 200px rgba(0,0,255,0);
}
.four_tone_Accordion:hover > .four_box_Accordion{
  box-shadow:-150px 0 0 200px rgba(0,0,0,1),-100px 0 0 200px rgba(255,0,0,1),-50px 0 0 200px rgba(0,255,0,1),0 0 0 200px rgba(0,0,255,1);
}

/* Beyond the basics */

.Beyond_the_basics{
  box-shadow:0 0 100px 10px rgba(255,255,255,0.5) inset,0 0 200px 10px rgba(0,0,0,0.06) inset,0 20px 20px -10px rgba(0,0,0,0.5);
}

/* ------------------------ */

.cycle_menu{
  margin:0 0 50px 0;
  min-width:1080px;
}

.cycle_menu ul li{
  float:left;
  list-style:none;
  max-width:200px;
  min-width:200px;
  width:200px;
  max-height:200px;
  min-height:200px;
  height:200px;
  border-radius:100px;
  background:rgba(0,0,0,0.05);
  margin:0 10px;
  text-align:center;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  transition:0.5s;
}

.cycle_menu ul li p{
  padding:65px 0 0 0;
  font-size:22px;
  font-weight:bold;
}

.menu_1{
  box-shadow:0 0 0 100px rgba(0,0,0,0) inset;
}

.menu_1:hover{
  box-shadow:0 0 0 100px rgba(255,0,0,0.5) inset;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  transform:rotate(360deg);
}

/* ------------------------ */

.menu_2{
  box-shadow:0 0 0 100px rgba(255,0,0,0.5) inset;
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  transform:rotate(360deg);
}

.menu_2:hover{
  box-shadow:0 0 0 0 rgba(0,0,0,0) inset;
}

/* ------------------------ */

.menu_3{
  box-shadow:0 0 0 0 rgba(255,0,0,0) inset;
  z-index:1;
  position:relative;
}

.menu_3:hover ~ .menu_6{
  left:490px;
}
.menu_3:hover{
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  transform:rotate(360deg);
}

.menu_6{
  opacity:1;
  position:absolute;
  left:50px;
  z-index:-1;
  box-shadow:0 0 0 100px rgba(255,0,0,0.5) inset;
}

/* ------------------------ */

.menu_4{
  box-shadow:0 0 0 0 rgba(0,255,0,1) inset,0 0 0 0 rgba(100,50,255,1) inset;
}
.menu_4:hover{
  box-shadow:0 -50px 0 0 rgba(0,255,0,1) inset,150px 150px 0 0 rgba(100,150,255,1) inset;
}

/* ------------------------ */

.menu_5{
  box-shadow:0 0 0 2000px rgba(0,0,0,0);
}
.menu_5:hover{
  box-shadow:0 0 0 2000px rgba(0,0,0,0.5);
}

.menu_5:hover ~ .menu_6{
  left:928px;
}

/* ------------------------ */

.box_menu{
  margin:0 0 50px 0;
  min-width:1080px;
}

.box_menu ul li{
  float:left;
  list-style:none;
  max-width:200px;
  min-width:200px;
  width:200px;
  max-height:80px;
  min-height:80px;
  height:80px;
  background:rgba(0,0,0,0.05);
  margin:0 10px;
  text-align:center;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  transition:0.5s;
}

.box_menu ul li p{
  padding:5px 0 0 0;
  font-size:22px;
  font-weight:bold;
}

/* ------------------------ */

.box_menu_1{
  box-shadow:220px 0 0 0 rgba(0,0,0,0),440px 0 0 0 rgba(0,0,0,0),660px 0 0 0 rgba(0,0,0,0),880px 0 0 0 rgba(0,0,0,0);
}
.box_menu_1:hover{
  box-shadow:220px 0 0 0 rgba(0,0,0,0.5),440px 0 0 0 rgba(0,0,0,0.5),660px 0 0 0 rgba(0,0,0,0.5),880px 0 0 0 rgba(0,0,0,0.5);
}

/* ------------------------ */

.box_menu_2{
  box-shadow:220px 0 0 0 rgba(0,255,0,0),440px 0 0 0 rgba(0,255,0,0),660px 0 0 0 rgba(0,255,0,0),-220px 0 0 0 rgba(0,255,0,0);
}
.box_menu_2:hover{
  box-shadow:0 0 0 0 rgba(0,255,0,0.5),0 0 0 0 rgba(0,255,0,0.5),0 0 0 0 rgba(0,255,0,0.5),0 0 0 0 rgba(0,255,0,0.5),0 0 0 50px rgba(0,255,0,1) inset;
}

/* ------------------------ */
.box_menu_3{
  position:relative;
}
.box_menu_3 p{
  width:200px;
  height:80px;
  font-weight:bold;
  -webkit-transition:1s;
  -moz-transition:1s;
  transition:1s;
}
.box_menu_3:hover{
 box-shadow:0 -30px 0 0 rgba(0,0,0,0.5) inset; 
}
.box_menu_3:hover > p{
  -webkit-transform:rotatey(720deg) scale(1.5);
  -moz-transform:rotatey(720deg) scale(1.5);
  transform:rotatey(720deg) scale(1.5);
}

/* ------------------------ */

.box_menu_4{
  box-shadow:0 0 0 0 rgba(0,0,0,1) inset,0 0 0 0 rgba(0,0,0,1) inset,0 -30px 0 0 rgba(0,0,0,0.5) inset;
}
.box_menu_4 p{
  width:200px;
  height:80px;
  -webkit-transform:scale(1.5);
  -moz-transform:scale(1.5);
  transform:scale(1.5);
}

.box_menu_4:hover{
  box-shadow:30px 0 0 0 rgba(0,0,0,1) inset,-30px 0 0 0 rgba(0,0,0,1) inset,0 -30px 0 0 rgba(0,0,0,0.5) inset;
}

/* ------------------------ */

.box_menu_5{
  box-shadow:-40px 0 -20px 20px rgba(0,0,0,0) inset,40px 0 -20px 20px rgba(0,0,0,1) inset;
}
.box_menu_5:hover {
    box-shadow:-40px 0 -20px 20px rgba(0,0,0,1) inset,40px 0 -20px 30px rgba(0,255,0,1) inset;
}

/* ------------------------ */
/* ------------------------ */
/* ------------------------ */
/* ------------------------ */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.