I am trying to blend two layers of text on top of each other, where both layers are white, but on the parts where the two words overlaps each other, I want the words to have the same color as the background.
I've started playing around with mix-blend-mode.
It only needs to work in the last version of the browsers (never mind ie)
http://codepen.io/SusanneLundblad/pen/bEopPw?editors=110
.wrap
display: flex
justify-content: center
align-items: center
h1,h2
font-family: 'Limelight', cursive;
text-transform: uppercase
h1
font-size: 400px
color: white
//mix-blend-mode: overlay
h2
color: #282828
position: absolute
font-size: 200px
top: 50%
left: 50%
transform: translate(-50%,-50%)
If anyone has any suggestions I would be super happy!
You can do it by making use of svg as background along with the
-webkit-background-clip: text;
property.
Updated: http://codepen.io/anon/pen/gPGmLo
Note: Code only supports webkit browsers.