Available in Chrome 52+ | View on GitHub | Browse Samples
Starting with Chrome 52, hex color values can include an alpha (transparency) value. This capability has two forms.
#RRGGBBAA
#RGBA
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.
.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;
}
}
<div class="bottom">
<div class="overlay1"></div>
</div>
<div class="bottom">
<div class="overlay2" id="demo"></div>
</div>