transparentにも色がある

CSSでグラデーションを作るとき、ベースの背景色を透過させたいときは transparent(透明) を指定しますが、前面か背景どちらかに色がついているときは、フチのところが黒ずんで見えてしまいます。


実は、transparent には色の指向のようなものがあったんです。

transparent というキーワードで指定されるのは rgba(0, 0, 0, 0) または hsla(0, 0%, 0%, 0) 、つまり黒色の、アルファ値がゼロの状態です。
だから例えば red から transparent へグラデーションさせた場合には彩度と明度とアルファ値が同時にグラデーションするため、部分的に彩度と明度の低い、黒ずんだような部分ができてしまうんです。

これを綺麗に見せるには、transparent ではなく gba(255, 0, 0, 0) または hsla(0, 100%, 50%, 0) など、色は変えずにアルファ値だけをゼロにした色か、単純に明るめの色であれば gba(255, 255, 255, 0) または hsla(0, 100%, 100%, 0) など、白のアルファ値ゼロの色を指定すればOKです。


実際のコードはこちらをご参考にどうぞ↓
Dots Obsession in CSS