ドットフィルター

画像にドット状の模様を重ねる

「CSSだけで画像の上にドットフィルター（網点のような重ね模様）をかける」テクニックの1つです。

See the Pen 画像にドット状の模様を重ねる by ちいうさ (@zqnixpal-the-looper) on CodePen.

解説

.dot-filter {
  width: 400px;
  aspect-ratio: 400 / 400;
  position: relative;
}

width: 幅400pxで固定
aspect-ratio: アスペクト比 （400:300）を維持
position: relative: ::afterを絶対配置するための基準

.dot-filter__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

width: 100%, height: 100%: 親のサイズにフィット
object-fit: cover: アスペクト比を保ったままトリミング

.dot-filter::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(0 0 0 / 12%) 3px, transparent 1.2px);
  background-size: 10px 10px;
  opacity: 0.5;
}

::after: 疑似要素でフィルター部分を作成
position: absolute + inset: 0: 親要素全体に広がる
background-image:小さな黒ドット（3px）＋透明背景のラジアルグラデーション
background-size: 10px 10px: ドットの間隔（密度を調整）
opacity: 0.5: 全体の透明度（フィルター効果の強さ）

アレンジ

目的	変更箇所
ドットを濃くしたい	opacity を 0.7 などに上げる
ドットを大きくしたい	3px → 6px、background-size も調整
ドットの色を変えたい	rgb(0 0 0 / 12%) を red, #333, rgba() に変更
ドットの間隔を広げたい	background-size を 6px 6px などに変更

まとめ

このテクニックは、CSSだけでドットパターンの重ね表現を実現できるシンプルで軽量な方法です。
画像加工ソフトを使わずに、フィルター風デザインをWebで再現したいときに非常に便利です。