Skip to content

Instantly share code, notes, and snippets.

@martynchamberlin
Last active October 3, 2019 17:10
Show Gist options
  • Save martynchamberlin/36a1484c29fe995efeaa3488667cedc9 to your computer and use it in GitHub Desktop.
Save martynchamberlin/36a1484c29fe995efeaa3488667cedc9 to your computer and use it in GitHub Desktop.
Turns out that opacity doesn't evenly compound. If you have a layer of black at 20% opacity and a layer on top of that at 10%, the result is not 30%. If you're wanting a total of 30% in this scenario, that top layer should instead be 13%.
<div class="has-children">
<div class="ten">
10%
</div>
<div class="twenty">
20%
</div>
<div class="thirty">
30% (#b2b2b2)
</div>
<div class="twenty has-children">
<div class="thirteen">
13% atop 20% (#b2b2b2)
</div>
</div>
</div>
<style>
* {
box-sizing: border-box;
}
div {
color: white;
margin: 0 0 15px;
text-align: center;
width: 200px;
}
div:not(.has-children) {
padding: 15px;
}
.ten {
background: rgba(0, 0, 0, .1);
}
.twenty {
background: rgba(0, 0, 0, .2);
}
.thirty {
background: rgba(0, 0, 0, .3);
}
.thirteen {
background: rgba(0, 0, 0, .13);
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment