Alpha Channel Support for CSS Hex Syntax Sample

Available in Chrome 52+ | View on GitHub | Browse Samples

Background

Starting with Chrome 52, hex color values can include an alpha (transparency) value. This capability has two forms.

Consider the example code below. Both .bottom <div> elements have a red background overlaid with yellow box. .overlay1 shows what all the examples would look like without an alpha channel. Yellow overlays red. .overlay2 shows the new syntax using two-character hex values. (The value #ff07 would accomplish the same thing.)

To approximate the alpha channel results in older browsers, the example uses @supports not to set a color that approximates the result of placing yellow over red with a 50% transparency.

CSS Snippet

.bottom {
  background: red; 
  width: 200px; 
  height: 200px;
  margin: 2%;
}

.overlay1 {
  background: yellow;
  width: 92%;
  height: 92%;
  margin: 4%;
  transform: translateY(4%);
}

.overlay2 {
  background: #ffff0077;
  width: 92%;
  height: 92%;
  margin: 4%;
  transform: translateY(4%);
}

@supports not (color:#rgba) {
  .overlay2 {
    background: #fa7d1e;
  }
}

HTML Snippet

  <div class="bottom">
    <div class="overlay1"></div>
  </div>
  
  <div class="bottom">
    <div class="overlay2" id="demo"></div>
  </div>