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.