【HTML/CSS】CSSで画像をぼかしたい

<img class="blur" src="gazou.jpg">

.blur {
  /* filter: blur(); ~px: ぼかす（にじませる）具合 */
  filter: blur(2px);
}

<img class="opacity" src="gazou.jpg">

.opacity {
  /* filter: opacity(); 0: 元画像, 0~:ぼかし具合 */
  /* デフォルト: 0 */
  filter: opacity(0.4);
}

<img class="brightness" src="gazou.jpg">

.brightness {
  /* filter: brightness(); 0:黒, 0~: 暗くする, 1:元画像、1~:明るくする */
  /* デフォルト: 1 */
  filter: brightness(1.5);
}

<img class="contrast" src="gazou.jpg">

.contrast {
  /* filter: contrast(); 0:グレー, 0~:コントラストを低くする, 1:元画像、1~:コントラストを高くする */
  /* デフォルト: 1 */
  filter: contrast(1.4);
}

<img class="drop-shadow" src="gazou.png">

.drop-shadow {
  /* filter: drop-shadow(影をずらす大きさ（水平方向） 影をずらす大きさ（垂直方向） ぼかし具合 色); */
  filter: drop-shadow(10px 10px 3px rgba(119, 138, 156, 0.747));
}

<img class="grayscale " src="gazou.png">

.grayscale {
  /* filter: grayscale(); 0~1(完全グレースケール) */
  /* デフォルト: 0 */
  filter: grayscale(1);
}

<img class="sepia" src="gazou.png">

.sepia {
  /* filter: sepia(); 0~1(完全セピア調) */
  /* デフォルト: 0 */
  filter: sepia(1);
}

filter: drop-shadow(10px 10px 3px rgba(119, 138, 156, 0.747)) grayscale(1);