<div class="shadowed-1">1. Hover me </div>
<div class="shadowed-2">2. Hover me </div>
<div class="shadowed-3">3. Hover me </div>
<div class="shadowed-4">4. Hover me </div>
<div class="shadowed-5">5. Hover me </div>
<div class="shadowed-6">6. Hover me </div>
<div class="shadowed-7">7. Hover me </div>
<div class="shadowed-8">8. Hover me </div>
<div class="shadowed-9">9. Hover me </div>

.shadowed-1 {
   padding:8px;
   box-shadow:0 0 15px 4px #0000;
  transition:0.5s;
 }
 .shadowed-1:hover {
   background-color:#000;
   color:#fff;
   box-shadow:0 0 15px 4px #000;
 }

.shadowed-2 {
   padding:8px;
  transition:0.5s;
 }
 .shadowed-2:hover {
   background-color:#000;
   color:#fff;
   filter:blur(5px);
 }
 
.shadowed-3 {
   padding:8px;
   box-shadow:
    0 0 0px #000 inset,
    0 0 0px #000;
   transition:0.5s;
 }
 .shadowed-3:hover {
   box-shadow:
    0 0 10px #000 inset,
    0 0 10px #000;
    border-radius: 10px;
 }

.shadowed-4 {
   padding:8px;
   box-shadow:0 0 30px 20px #0000;
   clip-path: inset(0 -100px);
  transition:0.5s;
 }
 .shadowed-4:hover {
   background-color:#000;
   color:#fff;
   box-shadow:0 0 30px 20px #000;
 }

.shadowed-5 {
   padding:8px;
   box-shadow:0 0 30px 20px #0000;
   clip-path: inset(-100px 0); 
   transition:0.5s;
 }
 .shadowed-5:hover {
   background-color:#000;
   color:#fff;
   box-shadow:0 0 30px 20px #000;
 }
  
div.shadowed-6 {
  --w:11ch;
  font-family:monospace;
  letter-spacing: var(--w);
  width: var(--w);
  white-space: nowrap;
  overflow:hidden;
  text-shadow: 
    calc(-1*var(--w)) 0 0,
    calc(-2*var(--w)) 0 0,
    calc(-3*var(--w)) 0 0,
    calc(-4*var(--w)) 0 0,
    calc(-5*var(--w)) 0 0,
    calc(-6*var(--w)) 0 0,
    calc(-7*var(--w)) 0 0,
    calc(-8*var(--w)) 0 0,
    calc(-9*var(--w)) 0 0,
    calc(-10*var(--w)) 0 0;
  transition:0.5s;
}
.shadowed-6:hover { 
  text-shadow: 
    calc(-1*var(--w)) 0 5px,
    calc(-2*var(--w)) 0 0px,
    calc(-3*var(--w)) 0 5px,
    calc(-4*var(--w)) 0 0px,
    calc(-5*var(--w)) 0 5px,
    calc(-6*var(--w)) 0 0px,
    calc(-7*var(--w)) 0 5px,
    calc(-8*var(--w)) 0 0px,
    calc(-9*var(--w)) 0 5px,
    calc(-10*var(--w)) 0 0;
 }

.shadowed-7 {
   padding:8px;
   box-shadow:0 0 0px #0004;
   transition:0.4s linear,background 0.3s 0.4s linear,color 0.3s 0.4s linear;
 }
.shadowed-7:hover {
   background-color:#000;
   color:#fff;
   transform:perspective(100px) translateZ(5px);
   box-shadow:0 10px 20px  #000a;
   transition:0.4s linear,transform 0.3s 0.4s linear,box-shadow 0.3s 0.4s linear;
 }
 
.shadowed-8 {
   padding:8px;
   border-radius:15px;
   box-shadow:-25px 0 20px 10px #0000;
   clip-path: polygon(-200px -200px,50% -200px,50% 0,100% 0,100% 100%,50% 100%,50% calc(100% + 200px),-200px calc(100% + 200px));
  transition:0.5s;
 }
 .shadowed-8:hover {
   background-color:#000;
   color:#fff;
   box-shadow:-25px 0 20px 10px #000;
 }

div.shadowed-9 {
   padding:8px;
   margin:30px;
   box-shadow:0 0 40px 35px #0000;
   clip-path: polygon(-100px -50px,50% 0,calc(100% + 100px) -50px,calc(100% + 100px) calc(100% + 50px),50% 100%,-100px calc(100% + 50px));
  transition:0.5s;
 }
 .shadowed-9:hover {
   background-color:#000;
   color:#fff;
   box-shadow:0 0 40px 35px #000;
 }

/**/
[class] {
  display:inline-block;
  vertical-align: middle;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}