<!DOCTYPE html> <html> <head> <style> #container { border: 3px dotted black; background: yellow; overflow: hidden; width: 400px; max-height: 25px; } #container.masked { mask: url('#fade_mask_bottom'); } .item { font-size: 30px; } </style> </head> <body> <div id='container' class="masked"><div class="item">PASS</div></div> <!-- BEGIN SVG MASK: --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <mask id="fade_mask_bottom" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> <linearGradient id="fade_gradient_bottom" gradientUnits="objectBoundingBox" x2="0" y2="1"> <stop stop-color="white" stop-opacity="1" offset="0.7"></stop> <stop stop-color="white" stop-opacity="0" offset="1"></stop> </linearGradient> <rect x="0" y="0" width="1" height="1" fill="url(#fade_gradient_bottom)"></rect> </mask> </svg> <!-- END SVG MASK --> </body> </html>