Black and White Opacity Functions

Avatar of Chris Coyier
Chris Coyier on

It’s pretty common to need a bit of transparent black or white. In CSS, you can do:

.half-black {
  background: rgba(0, 0, 0, 0.5);
}

It gets easier in Sass, where you can substitute a color name:

.half-black {
  background: rgba(black, 0.5);
}

Or make it easier still, by making custom functions:

@function black($opacity) {
  @return rgba(black, $opacity)
}
@function white($opacity) {
  @return rgba(white, $opacity)
}

.half-black {
  background: black(0.5);
}