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>