夢の中の景色のようなDreamy blurエフェクトをCSSで実装する

Result

映画等でよく見かける演出で、夢の中にいて、ちょっとボヤけるような景色っぽい表現「Dreamy blur（参照：Youtube）」エフェクトをCSSで実装する、というもの。

具体的にはbackdrop-filterが採用されています。参考記事先でも最初はmix-blend-modeを使ったようで、個人的にも初見はそう思ったけど必要ないみたいです。

css

picture {
    position: relative;
    display: block;
  }
  picture::after {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(3px) opacity(.5) brightness(1.3);
  }

brightnessは明るさの度合いを調整します。

html

<picture>
  <img src="url.png" />
</picture>

SVGフィルターを使う方法もあります。

<img src="url.png" style="filter: url(#dreamy-blur)"/>

<svg height="0">
  <filter id="dreamy-blur">
    <feGaussianBlur stdDeviation="3" />
    <feComponentTransfer>
      <feFuncR type="linear" slope="1.3" />
      <feFuncG type="linear" slope="1.3" />
      <feFuncB type="linear" slope="1.3" />
      <feFuncA type="linear" slope=".5" />
    </feComponentTransfer>
    <feBlend in2="SourceGraphic" />
  </filter>
</svg>

使いこなせるならSVGの方が汎用的ですかね。以下を参考にしました。

via

Dreamy Blur