Skip to content

Instantly share code, notes, and snippets.

@brrd

brrd/inset-box-shadow-on-round-image.css

Last active February 20, 2022 14:05
Show Gist options
  • Save brrd/baf587a2876b8de3b53162adeacbdc4c to your computer and use it in GitHub Desktop.
Save brrd/baf587a2876b8de3b53162adeacbdc4c to your computer and use it in GitHub Desktop.
Download ZIP
Subtle inset box-shadow on round images
Raw
inset-box-shadow-on-round-image.css
.img-container {
width: 100%;
max-width: 100px;
position: relative;
}
.img-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.1)
}
.img-container img {
width: 100%;
border-radius: 50%;
}
Copy link

ghost commented Feb 20, 2022

Thanks to your code above, I was able to apply the very nice inset-box-shadow to my round profile picture. Happy coding :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment