CSSで文字に光彩のような効果を加える

3つの効果の比較

テキストシャドウとドロップシャドウでは、少し色の出方が違います。
ブラーを使った方法は、他の2つと比べて色を濃く出すことが出来ます。

.text-shadow-black{
  text-shadow: 0 0 0.5em rgba(0, 0, 0, 1);
}
.drop-shadow-black{
  filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 1));
}
.blur-black{
  //親要素に display: flex を設定しています。
  position: relative; z-index: 0;
  &::after{
    content: "";
    position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 1);
    filter: blur(0.5em);
  }
}

光彩を調整する

ブラーを使った方法は、他の2つと比べて色や範囲の調整が容易です。

背景色の濃さを変える

.blur-black{
  //中略
  &.ver11::after{ background-color: rgba(0, 0, 0, 1); }
  &.ver12::after{ background-color: rgba(0, 0, 0, 0.6); }
  &.ver13::after{ background-color: rgba(0, 0, 0, 0.3); }
}

ぼかしの半径を変える

.blur-black{
  //中略
  &.ver21::after{ filter: blur(0em); }
  &.ver22::after{ filter: blur(0.5em); }
  &.ver23::after{ filter: blur(1em); }
}

パディングの大きさを変える

パディングを大きくすると色の濃い範囲を広げることが出来ます。

.blur-black{
  //中略
  &.ver31{ padding: 0em;}
  &.ver32{ padding: 0.5em;}
  &.ver33{ padding: 1em;}
}