Custom Glow Rings Inside of Elements

I had a situation where I wanted to highlight an arbitrary element on a page. Like, call attention to it briefly.

There is a pretty obvious and straightforward way to do this. We could apply an inset style box-shadow to whatever, and that would apply a nice glow that works just fine:

.highlighted-element {
  box-shadow:
    inset 0 0 40px 8px oklch(0.5574 0.2911 312.88 / 0.55),
    inset 0 0 12px 2px oklch(0.5574 0.2911 312.88 / 0.88);
}Code language: CSS (css)

We could improve the experience by applying the box-shadow in a @keyframes animation so it can fade in and grow nicely, as well as only appear for a few seconds. Here’s that, done with a :hover state.

But I had something more special in mind!

I didn’t want just a single color. I wanted to use something like a conic-gradient() look. Or maybe a texture or image of some kind. I just wanted a bit more freedom for the look. Still a glow of sorts, and you should still be able to see the (arbitrary) element underneath, but with a custom design.

So first I put this cover over the highlighted element:

.highlighted-element {
  position: relative;
  
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: ... whatever! 
  }
}Code language: CSS (css)

That puts a right-sized cover over the entire element.

So now how do we turn that into a glow that only comes in from the edges?

Masking!

First, we’ll apply an image over the highlighted element using the same code as above.

Then we can mask that pseudo-element, starting on the left and right:

--inset: 30px;
mask-image: linear-gradient(
  to right,
  black 0%,
  transparent var(--inset),
  transparent calc(100% - var(--inset)),
  black 100%
);Code language: CSS (css)

The cool part is that we can also mask the top and bottom with a second mask, then combine the masks with mask-composite: add;.

--inset: 20px;
mask-image:
  linear-gradient(
    to right,
    black 0%,
    transparent var(--inset),
    transparent calc(100% - var(--inset)),
    black 100%
  ),
  linear-gradient(
    to bottom,
    black 0%,
    transparent var(--inset),
    transparent calc(100% - var(--inset)),
    black 100%
  );
mask-composite: add; /* union of both edge bands */
Code language: JavaScript (javascript)

Now that’s freedom!

That’s the whole idea.

Above we used an image, but we could use anything we want. In my case, I was shooting for a rainbow conic-gradient thing like I mentioned.

Here’s an example with both types of glows (the box-shadow kind and the “whatever” kind) applied to random elements for a few seconds.