Generated by SassMeister.com.

SassMeister-input-HTML.html

<link href='https://fonts.googleapis.com/css?family=Lato:300,100,400' rel='stylesheet' type='text/css'>
<div class="widget-container">
    <div class="wooplr-text">
      <span class="title">
        I'm on Wooplr!
      </span>
    </div>
    <div class="profile-container">
        <span class="profimgbk">
        </span>
        <span class="profimg" style="background-image:url('http://www.wooplr.com/serve?blob-key=http://res.cloudinary.com/wooplr/image/upload/dnigkrjh/fcknrvgdikdchnh5hduv')">
        </span>
        <div class="name">
            Bhavishya Shetty
        </div>
        <div class="tagline">
            Fashion Blogger
        </div>
    </div>
    <div class="stats-container">
        <span class="loves">
            45
            <span>Loves</span>
        </span>
        <span class="followers">
            45
            <span>Followers</span>
        </span>
        <span class="posts">
            45
            <span>Posts</span>
        </span>
    </div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

.widget-container {
  width: 300px;
  background: rgb(235,23,24);
  background: -moz-linear-gradient(top,  rgba(235,23,24,1) 0%, rgba(201,21,22,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(235,23,24,1) 0%,rgba(201,21,22,1) 100%);
  background: linear-gradient(to bottom,  rgba(235,23,24,1) 0%,rgba(201,21,22,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb1718', endColorstr='#c91516',GradientType=0 );
  overflow: hidden !important;
  text-align: center;
  font-family: Lato,Helvetica;
  color: #eee;
  .wooplr-text {
    line-height: 3em;
    text-transform: uppercase;
  }
  .profile-container {
    position: relative;
    .profimg {
      width: 150px;
      height: 150px;
      display: inline-block;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 50%;
      position: absolute;
      left: 75px;
      top: 10px;
    }
    .profimgbk{
      display:inline-block;
      width: 170px;
      height: 170px;
      border-radius: 50%;
      background: rgb(255,255,255);
      background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);
      background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
      background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
      -webkit-box-shadow: 50px 50px 160px -38px rgba(0,0,0,0.59);
-moz-box-shadow: 50px 50px 160px -38px rgba(0,0,0,0.59);
box-shadow: 50px 50px 160px -38px rgba(0,0,0,0.59);
    }
    .name{
      line-height:3em;
      font-size:1.3em;
      height:2.5em;
    }
    .tagline{
      line-height:1em;
      font-size: 0.7em;
      height:2em;
      text-transform: uppercase;
    }
  }
  .stats-container{
    font-size:0;
    >span{
      width: 100px;
      display: inline-block;
      font-size: initial;
      box-sizing: border-box;
      line-height: 3em;
      -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.7);
      -moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.7);
      box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.2);
      background: rgb(69,72,77);
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
color: #ddd;
        span{
          display:block;
          line-height: 1.5em;
          font-size: 0.7em;
          height: 2em;
          margin-top: -0.5em;
          text-transform: uppercase;
          color: #aaa;
        }
    }
  }
}

SassMeister-output.css

.widget-container {
  width: 300px;
  background: #eb1718;
  background: -moz-linear-gradient(top, #eb1718 0%, #c91516 100%);
  background: -webkit-linear-gradient(top, #eb1718 0%, #c91516 100%);
  background: linear-gradient(to bottom, #eb1718 0%, #c91516 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb1718', endColorstr='#c91516',GradientType=0 );
  overflow: hidden !important;
  text-align: center;
  font-family: Lato,Helvetica;
  color: #eee;
}

.widget-container .wooplr-text {
  line-height: 3em;
  text-transform: uppercase;
}

.widget-container .profile-container {
  position: relative;
}

.widget-container .profile-container .profimg {
  width: 150px;
  height: 150px;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  position: absolute;
  left: 75px;
  top: 10px;
}

.widget-container .profile-container .profimgbk {
  display: inline-block;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: white;
  background: -moz-linear-gradient(top, white 0%, #f3f3f3 50%, #ededed 51%, white 100%);
  background: -webkit-linear-gradient(top, white 0%, #f3f3f3 50%, #ededed 51%, white 100%);
  background: linear-gradient(to bottom, white 0%, #f3f3f3 50%, #ededed 51%, white 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
  -webkit-box-shadow: 50px 50px 160px -38px rgba(0, 0, 0, 0.59);
  -moz-box-shadow: 50px 50px 160px -38px rgba(0, 0, 0, 0.59);
  box-shadow: 50px 50px 160px -38px rgba(0, 0, 0, 0.59);
}

.widget-container .profile-container .name {
  line-height: 3em;
  font-size: 1.3em;
  height: 2.5em;
}

.widget-container .profile-container .tagline {
  line-height: 1em;
  font-size: 0.7em;
  height: 2em;
  text-transform: uppercase;
}

.widget-container .stats-container {
  font-size: 0;
}

.widget-container .stats-container > span {
  width: 100px;
  display: inline-block;
  font-size: initial;
  box-sizing: border-box;
  line-height: 3em;
  -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  background: #45484d;
  background: -moz-linear-gradient(top, #45484d 0%, black 100%);
  background: -webkit-linear-gradient(top, #45484d 0%, black 100%);
  background: linear-gradient(to bottom, #45484d 0%, black 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
  color: #ddd;
}

.widget-container .stats-container > span span {
  display: block;
  line-height: 1.5em;
  font-size: 0.7em;
  height: 2em;
  margin-top: -0.5em;
  text-transform: uppercase;
  color: #aaa;
}

SassMeister-rendered.html

<link href='https://fonts.googleapis.com/css?family=Lato:300,100,400' rel='stylesheet' type='text/css'>
<div class="widget-container">
    <div class="wooplr-text">
      <span class="title">
        I'm on Wooplr!
      </span>
    </div>
    <div class="profile-container">
        <span class="profimgbk">
        </span>
        <span class="profimg" style="background-image:url('http://www.wooplr.com/serve?blob-key=http://res.cloudinary.com/wooplr/image/upload/dnigkrjh/fcknrvgdikdchnh5hduv')">
        </span>
        <div class="name">
            Bhavishya Shetty
        </div>
        <div class="tagline">
            Fashion Blogger
        </div>
    </div>
    <div class="stats-container">
        <span class="loves">
            45
            <span>Loves</span>
        </span>
        <span class="followers">
            45
            <span>Followers</span>
        </span>
        <span class="posts">
            45
            <span>Posts</span>
        </span>
    </div>
</div>