CSSを使用したぼかし効果の作成方法

1. テキストのぼかし:

   .blurred-text {
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   }

2. 背景のぼかし:

   .blurred-background {
    filter: blur(5px);
   }

3. 要素全体のぼかし:

   .blurred-element {
    backdrop-filter: blur(5px);
   }

4. 特定の要素内のぼかし:

   .blurred-container {
    position: relative;
   }
   .blurred-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
   }

これらは一部の基本的なぼかし効果の例ですが、さまざまなパターンと組み合わせを試すことができます。また、ぼかしの強さや色を調整するために、値を変更することもできます。さらに、ぼかし効果を要素に対してのみ適用したり、要素の一部分にのみ適用したりすることも可能です。

ぼかし効果は、ウェブデザインにおいて魅力的な視覚効果を追加するための強力なツールです。是非、これらのコード例を試してみてください。