<<NO SVG>>Gradient ring profile picture

by Saksham Malhotra

HTML

<div class="container">
  <div class="ring">
    <div class="content">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKsKsU5rPKyeQ117plxtOX0agkjHOa8tzFykVhOFHIQAPMbzuw" />
    </div>
  </div>
</div>

CSS

.container {
  height: 120px;
  width: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: linear-gradient(to top right, #2ed573, #1e90ff);
  border-radius: 50%;
}

.ring {
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #fff;
}

img {
  height: calc(100% - 8px);
  width: calc(100% - 8px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}