<svg viewBox="0 0 600 140">
    <defs>
        <linearGradient id="fade" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stop-color="#fff" stop-opacity="0.6"/>
            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
        </linearGradient>
        <mask id="mref">
            <rect width="100%" height="100%" fill="white"/>
            <rect y="70" width="100%" height="70" fill="url(#fade)"/>
        </mask>
    </defs>
    <rect width="100%" height="100%" fill="#ffffff"/>
    <text x="50%" y="44" font-size="36" text-anchor="middle" fill="#7dd3fc">Water</text>
    <g transform="translate(0,88) scale(1,-1)" mask="url(#mref)">
        <text x="50%" y="0" font-size="36" text-anchor="middle" fill="#1e293b" opacity="0.6">Water</text>
    </g>
</svg>