-webkit-mask test

by Lucas Krause

HTML

<div>Hello world!</div>

CSS

/** /
body {
    background-color:red;
}
/**/
div {
    width:300px;
    height:300px;
    font-size:3em;
    background-image:-webkit-linear-gradient(top, blue 0%, aqua 100%);
    
    -webkit-mask-image:-webkit-linear-gradient(left, #000 0%, transparent 100%);
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:left top;
}