Add a Custom Profile Picture Frame

4 days ago — by Kayla⟡ — Profile Picture Effects — used 3 times

Add a colorful border and soft glow around your profile picture.

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save.

<style>
.general-about .profile-pic img,
.profile .profile-pic img {
  border: 6px solid transparent !important;
  border-radius: 12px !important;

  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      135deg,
      #f597b9,
      #9dccf6,
      #9f7cbc
    ) border-box !important;

  box-shadow:
    0 0 0 4px rgba(255,255,255,.55),
    0 5px 12px rgba(159,124,188,.30) !important;
}
</style>

How to use: copy the code above → open your layout editor → paste it at the bottom of the Advanced CSS tab → save → refresh your profile. Elements stack — you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Profile Picture Effects

« Back to Profile Picture Effects | « All Profile Elements