Blur gradient on text (SVG)

blur-gradient-on-text-svg.markdown

Blur gradient on text (SVG)

I've never seen a blur gradient applied to text on the web, so I tried to create it.

A Pen by Saijo George on CodePen.

License.

index.html

<!-- 
I've never seen a blur gradient applied to text on the web, so I tried to create it. Opacity fades are common as they're simple in CSS. 

This method is a merge of two duplicate text nodes:
 - one node fades to transparent on the right,
 - the other is blurred and fades to transparent on the left.

I'd prefer if:
- there were no duplicated nodes (even in the shadow dom)
- this effect could be achieved with a single CSS filter (insted of <text> inside SVG)
-->
<svg viewBox="0 0 240 300">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="2" />
    </filter>

    <linearGradient id="fadeToRight" x1="0%" x2="100%">
      <stop offset="0%" stop-color="white" />
      <stop offset="80%" stop-color="black" />
    </linearGradient>

    <linearGradient id="fadeToLeft" x1="0%" x2="100%">
      <stop offset="0%" stop-color="black" />
      <stop offset="20%" stop-color="white" />
    </linearGradient>

    <mask id="fadeToRightMask">
      <rect width="100%" height="100%" fill="url(#fadeToRight)" />
    </mask>

    <mask id="fadeToLeftMask">
      <rect width="100%" height="100%" fill="url(#fadeToLeft)" />
    </mask>
  </defs>

  <!-- <text> is only inside this <g> so we can duplicate it with <use> -->
  <g mask="url(#fadeToRightMask)">
    <text dx="0" dy="80" id="text">i think i need my eyes tested</text>
  </g>
  <use xlink:href="#text" filter="url(#blur)" mask="url(#fadeToLeftMask)" />
</svg>

style.css

body {
  margin: 0;
}
text {
  font-size: 20px;
}