cssのみで画像をハーフトーン加工

cssのみで画像をハーフトーン加工

簡単なCSSだけで画像をハーフトーン加工するサンプルコードを記述してます。

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

ハーフトーン加工

::after 疑似要素を使って、background-imageでハーフトーンを作成しています。

.halftone::afterの「background-size」で水玉の大きさを決めています。
「radial-gradient」の色と「background-color」を変えると簡単にハーフトーンの色を変えることができます。

サンプルコード

以下は実際に、画像をハーフトーン加工したサンプルコードとなります。

original image

Halftone result