🍆

CSSの filter:blur() は実質ドロップシャドウだということに今更気付いた

2025/06/05に公開

上記の画像はCSS の filter: blur() を適用したものです。コンテンツ部分も滲んでしまうし、四辺が広がるように滲んじゃって使い物にならない。
かなり扱いづらい印象を持っていないでしょうか？
しかし、それは大きな間違いでした。

filter: blur() は 実質的に「ドロップシャドウ」 だったのです。
この認識に変えるだけで表現力が爆裂に上がることに気づいたので共有します！

 見本

ブラーあり
ブラーなし





上記の左側は filter: blur() を使った例です。
かなり雑に書いたソースですが、周囲にグラデーション付きのシャドウが付いていてモダンな印象を受けます。
https://jsbin.com/yuxihefoge/edit?html,css,output
html
  <div class="wrapper">
    <div class="card">
      <span class="bg"></span>
      <span class="main"></span>
    </div>
  </div>
css
.wrapper {
  padding: 80px;
}

.card {
  position: relative;
  width: 100px;
  aspect-ratio: 1 / 1;
}

.bg {
  display: block;
  border-radius: 16px;
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 10;
  background: #235e78;
background: linear-gradient(90deg, rgba(35, 94, 120, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
  filter: blur(12px);
}

.main {
  display: block;
  border-radius: 16px;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  z-index: 10;
  background: linear-gradient(90deg, rgba(35, 94, 120, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
}
.main と .bg 要素は全く同じサイズで、単に重なっているだけです。 .bg に filter: blur() をかけるだけで四方に滲んでくれるため、これがシャドウのような役割をしてくれます。
本当にただ重ねているだけで、シャドウ用に padding 等を付与する必要が一切ありません。
こんなにも便利でもモダンな表現ができる filter: blur() は、あまりにも過小評価されているように思います。
デザインが苦手な個人開発者も積極的に取り入れていきましょう！

見本

Discussion