Black and White Opacity Functions

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);

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.