【CSS】超簡単！ぼかしを使ってデザインの幅を広げよう

こんにちは！ラクです。

この記事では、色んなものに「ぼかし」をかける方法を紹介します。

たった一行で実装できるので実際に使って見て下さい！

ぼかしをかける方法

ぼかしをかける方法は、以下の通りに書きます。

filter: blur(値);

「値」には、○pxのように値を入れます。値が大きくなるほど、強いぼかしがかかります！

たったこれだけで、ぼかせます。

これを使えば、文字はもちろん、画像も良い感じにぼかせます。

p {
  filter: blur(5px);
}

img {
  filter: blur(7px);
}

まとめ

とても使い勝手の良いプロパティなので、皆さんも使って見ださい！