CSS Box-Shadow Hover Trick (without siblings & pseudos)

CSS Box-Shadow Hover Trick (without siblings & pseudos)

What if you could create an interesting CSS hover effect using only a single <div> ?

No extra HTML elements.
No sibling elements.
No ::before.
No ::after.

In this tutorial, I’ll break down how I created a visually layered hover effect by working within the limitations of just one HTML element and CSS.

This is a small CSS experiment, but it demonstrates an important idea: before adding more markup, explore how far a single element can go.

1. Start with a single <div>

The HTML is intentionally extremely simple:

<div class="box"></div>

That's it.

There are no additional elements inside the box.
Normally, when creating complicated hover effects, we might add extra elements or pseudo-elements such as:

.box::before {
    ...
}

.box::after {
    ...
}

But in this experiment, those are completely off-limits.

The challenge is:
Can we create the visual layers using the <div> itself?

2. Create the basic box
Below is the css for box element:

.box {
  background: #347797;
  width: 25rem;
  aspect-ratio: 1 / 1;
  position: fixed;
  /* uncomment below line for letter D  */
  /* border-radius: 0 50% 50% 0; */ 
  inset: 0rem;
  margin: auto;
  transition:all 0.5s ease;
}

.box:hover {
    box-shadow: inset 0px 0rem 0 2rem blue, inset 0 0rem 0 4rem red, inset 0 0rem 0 6rem purple, inset 0 0rem 0 8rem pink;
}

Codepen Demo 1

Below is other demo with borders, outlines, css custom variables used for conic gradients animation.

Codepen Demo 2