Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<div class="shiny">Here's some copy</div>

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

@mixin glassify($color) {
  $bright: lighten($color, 10);
  color: black;
  @if lightness($color) < 25 {
    $bright: lighten($color, 25);
  }
  @if lightness($color) < 50 {
    color: white;
  }
  background-image: linear-gradient(darken($bright, 15), $bright 50%, darken($color, 15) 51%, $color);
  border-top: solid 1px lighten($color, 10);
  border-bottom: solid 1px darken($color, 10);
  border-radius: 1em;
  box-shadow: 0 5px 10px darken($color, 40);
}

.shiny {
  @include glassify(#ff77ff);
  width: 300px;
  padding: 1em;
  margin: 5em auto;
  text-align: center;
}

SassMeister-output.css

.shiny {
  color: black;
  background-image: -webkit-linear-gradient(#ff5eff, #ffaaff 50%, #ff2bff 51%, #ff77ff);
  background-image: linear-gradient(#ff5eff, #ffaaff 50%, #ff2bff 51%, #ff77ff);
  border-top: solid 1px #ffaaff;
  border-bottom: solid 1px #ff44ff;
  border-radius: 1em;
  box-shadow: 0 5px 10px #aa00aa;
  width: 300px;
  padding: 1em;
  margin: 5em auto;
  text-align: center;
}

SassMeister-rendered.html

<div class="shiny">Here's some copy</div>