How to use box-shadow on circular images in CSS?

Question

So I'm trying to use the box-shadow function to create a glow around a circular logo when I hover over it. It's a .png with transparency, 75px x 75px. Heres the HTML:

<div class="nav_container">
  <a href="#home" id="nav_logo"><img id="logo" src="media/harvestmoonicon.png" alt="harvestmoonicon" width="75px" height="75px"></a>

I've tried:

#nav_logo{
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 50%;
}

#nav_logo:hover{
  border-radius: 50%;
  box-shadow: 0px 0px 9px -3px #fff3bf;
  transition: all 0.3s ease;
}

this creates the glow, but there's a gap between the image and where the glow actually begins, probably because the image is a square. Is there any way I can adjust the size of the box-shadow, to make it fit my image? I've tried adjusting the offsets, blur radius and the spread, but this doesn't solve it.

Thanks!

You need to [edit](https://stackoverflow.com/posts/67403302/edit) your question and add the code with proper formatting — Rojo, May 05 '21 at 14:43
Also, as recommended by Paulie_D, `drop-shadow` is part of `filter`. So you'd use it like this: `filter: drop-shadow(params);`. — Rojo, May 05 '21 at 14:44
Drop shadow worked perfectly, excuse my noobiness and thanks for the solution! — PopFendi, May 05 '21 at 15:26

score 0 · Answer 1 · answered May 06 '21 at 16:52

0

This has been asked already, if you are asking what I believe you are saying. Check this out and it might just answer your question:

Answer

answered May 06 '21 at 16:52

DevOffline

77
7

How to use box-shadow on circular images in CSS?

1 Answers1