【CSS】filterやcanvasを使わずにテキストにぼかし処理をかけたように見せる

動的にテキストにぼかし（ブラー）をかける場合、cssのfilterプロパティを使ったり、Context2DやWebGLで画像処理的にブラーをかける方法が考えられます。

developer.mozilla.org

今回は、それ以外の方法であたかもブラー処理を施しているかのように見せる手法を考えてみました。

text-shadowとcolorのみを操作します。

こちらがデモになります。

See the Pen Easy Text Blur by takumifukasawa (@takumifukasawa) on CodePen.

text-shadowは横のオフセット,縦のオフセット,ぼかしのサイズ,色の4つの値を指定することができます。

colorをtransparentにしてベタ塗りをなくし、text-shadowで縦横のオフセットを0にし中心を基準に影を広げることがポイントです。

p {
  font-size: 18px;
  line-height: 1.6em;
  letter-spacing: 0.07em;
  color: transparent;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

developer.mozilla.org

余談

text-shadowのブラー処理のロジックが気になったので調べてみました。

W3Cのドラフトにはこう書かれていました。

https://drafts.csswg.org/css-text-decor-3/#propdef-text-shadow

This property accepts a comma-separated list of shadow effects to be applied to the text of the element. Values are interpreted as for box-shadow [CSS-BACKGROUNDS-3]. (But note that spread values and the inset keyword are not allowed.) 

つまり、text-shadowの要素はbox-shadowとして解釈されるようです。

---

続いてbox-shadowの項目を見てみます。

https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow

box-shadowのblurについて説明しているshadow-blurの項目にはこう書かれていました。

https://www.w3.org/TR/css-backgrounds-3/#shadow-blur

Note this means for a long, straight shadow edge, the blur radius will create a visibly apparent color transition approximately the twice length of the blur radius that is perpendicular to and centered on the shadow’s edge, and that ranges from almost the full shadow color at the endpoint inside the shadow to almost fully transparent at the endpoint outside it.

ロジックを理解できたわけではないのですが、どうやらいわゆるカーネルを用いた画像処理的な方法ではなく、独自の複雑な処理を施しているのでしょうか。

もし詳しい方がいらしたらぜひご教授いただきたいです。