5 Stylish ways to enhance user profile images with CSS

With some simple CSS you can easily enhance the look of a user profile image.

Here are 5 bright and bold examples you can use as inspiration.

View demo on CodePen.

(1) CSS filter with a drop-shadow can be used to give a glow-like appearance.

<img class="css-shadow" src="https://i.pravatar.cc/75" />

.css-shadow { width: 75px; height: 75px; border-radius: 50%; border: 2px solid #cddc39; filter: drop-shadow(0 0 8px #ff5722); }

(2) By setting the top & left border colors different than the other borders we get this nice effect.



<img class="css-border" src="https://i.pravatar.cc/75" />

.css-border { border: 4px solid #cddc39; padding: 2px; border-radius: 50%; border-top-color: #ff5722; border-left-color: #ff5722; width: 75px; height: 75px; }


(3) Using the ::after pseudo-element we can insert an off shaped circle behind the profile image.



<div class="css-after"> <img src="https://i.pravatar.cc/75" /> </div>

.css-after { position: relative; } .css-after img { width: 75px; height: 75px; border-radius: 50%; border: 2px solid #cddc39; } .css-after::after { content: ""; width: 85px; height: 91px; border-radius: 50%; background-color: #ff5722; display: block; position: absolute; top: -6px; left: -3px; z-index: -1; }


(4) Another example using the ::after pseudo-element, this time a gradient is applied to the background.



<div class="css-after-gradiant"> <img src="https://i.pravatar.cc/75" /> </div>

.css-after-gradiant { position: relative; } .css-after-gradiant img { width: 75px; height: 75px; border-radius: 50%; } .css-after-gradiant::after { content: ""; width: 85px; height: 85px; border-radius: 50%; background: linear-gradient( 90deg, rgba(255, 87, 34, 1) 0%, rgba(205, 220, 57, 1) 100%, rgba(0, 212, 255, 1) 100% ); display: block; position: absolute; top: -5px; left: -5px; z-index: -1; }


(5) Overlaying the profile image with a half circle SVG gradient gives us this popular effect.



<div class="svg-half"> <img src="https://i.pravatar.cc/75" /> <svg> <linearGradient id="gradiant"> <stop offset="0%" style="stop-color: #ff5722;" /> <stop offset="100%" style="stop-color: #cddc39;" /> </linearGradient> <path d="M0,38 a1,1 0 0,0 75,0" /> </svg> </div>

.svg-half { position: relative; } .svg-half img { border-radius: 50%; width: 75px; height: 75px; } .svg-half svg { position: absolute; top: 0; left: 0; width: 75px; height: 75px; fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; stroke: #ff5722; stroke-width: 6; transform: rotate(90deg); stroke: url(#gradiant); }


All placeholder user photos used in this article are from Pravatar.



Michael Burrows

@michaelburrows