Image Outline

A little visual tweak I use a lot is adding a pseudo element with a 1px border and a black or white color (depending on the mode) with 10% opacity.

Image Border
Show Border

This helps create a sense of depth and definition and creates a somewhat consistent outline around the element.

Show Border

Instead of using a pseudo element, you can also now do this in Tailwind by using an outline. Thanks to Dan Hollick for pointing this out.

More

In case you have any questions reach me at jakub@kbo.sk, see more of my work on Twitter or subscribe to my newsletter.

Newsletter

I share stuff that I'm working on, new posts and resources here.

PreviousAnimating pathLengthNextMotion Gestures