以前、ブログで紹介した CSS filter で画像などにブラーをかけると四隅がもわっとした感じでエッジがきれいにぼかし切れない場合の解決方法をご紹介しましたが、どうやらこの方法でも解決できないケースがありました。

以前紹介した方法

CSS3のfilter:blurでぼかし効果をするとフチがぼやけるときの対処法

2020/2/14追記 : この方法で解決できない場合は、以下のSVGフィルターによるブラー加工で解決できます。 https://digipress.info/tech/svg-blur-for-css-filter/ CSS3の filterプロパティで blurを指定して背景画像やimgタグの画像にぼかし効果を施すと、ぼかし具合が大きいほど、対象要素のフチまでぼやけてしまって、なんだか美しくありませんね。 Webデザインをやってる方は、案外こんな経験をされた方もいるのではないでしょうか？ というわけで、今回のTipsはfilter:blurで画像にブラー効果を施したときに、フチにかかるぼや…

DigiPress

そこで、どんなパターンでもぼかす要素の四隅のフチまでしっかりブラーをかける(エッジがぼけない)別の方法を今回はご紹介します。

SVG フィルターによるブラー効果

CSS の filter: blur とマージン(margin)や位置(top, bottom, left, right)の拡大調整をしても、どうしてもエッジがきれいにぼかし切れない場合は、 SVG フィルターでブラーを施すと確実です。

filter: blur(10px);

これを SVG フィルターに置き換えて CSS の filter プロパティの値としてエンコードしたものを代入します。

filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='10' result='b'/%3E%3CfeMorphology operator='dilate' radius='10'/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E%3C/svg%3E#a");

ブラーの度合いは、stdDeviation と radius の数値(ピクセル)を変更するのみです。

面倒なので SVG blur のジェネレーターを作ってみた

同一ページ内に複数のフィルターを適用する際は、上記の SVG の id と result を一意にしておくほうが無難なので、いっそのことこの SVG フィルターによる CSS 用の filter を生成するためのジェネレーターを適当に作ってみました。

See the Pen SVG Blur Generator for CSS Filter by digistate (@digistate) on CodePen.

このジェネレーターを利用すれば、ぼかし具合(数値)を変化させるだけでブラーのプレビューの確認と同時に CSS フィルター用にエンコードされた SVG が得られます。