One Div Coffee

index.html

<div id="coffee">
</div>

One Div Coffee.markdown

One Div Coffee

A Pen by Lauren on CodePen.

License.

style.css

$coffee: #17120E;
$coffee_light: #CCA97B;

body {
  background-color: #fff;
}
#coffee {
  width: 200px;
  height: 200px;
  background-color: #FAFAFA;
  border-radius: 50%;
  margin-left: -85px;
  margin-top: -115px;
  position: absolute;
  left: 50%;
  top: 50%;
  box-shadow: 
    0 0 10px -1px rgba(black, 0.03),
    0 0 7px 5px rgba(black, 0.13),
    0 0 5px 36px white,
    0 0 0 37px rgba(black, 0.23),
    0 0 0 37px white,
    0 0 10px 42px rgba(black, 0.05);
}
/* offset-x | offset-y | blur-radius | spread-radius | color */
#coffee:before {
  display: block;
  content: '';
  position: absolute;
  background: #17120E;
  background: radial-gradient(circle, rgba($coffee_light,10%) -219%, $coffee 52%, $coffee_light); /* Standard syntax */
  top: 20px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  left: 20px;
  box-shadow: 
    0 0 0 0 rgba(white,0.6),
    0 0px 5px 5px rgba($coffee_light, 0.7),
    1px 0 0 16px #fff,
    0 0 3px 16px rgba(#ddd,0.4),
    0 0 0 15px #fff,
}
#coffee:after {
  background: white;
  background: linear-gradient(90deg, white, white 30%, #eee 83%, white);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.1);
  content: '';
  display: block;
  height: 35px;
  position: absolute;
  top:83px;
  width: 35px;
  left:198px;
}