CSS でテキストの合成効果をつける

前回はグラデーションの背景を画像を使わず CSS で描画したので、さらに応用

上に表示するテキストに背景との合成効果を指定してみたい

単に白色のテキストをのせても下記のようにオーバーレイ効果をかけるとこんな感じに

Overlay

CSS のコードはテキストのスタイルに mix-blend-mode を指定するだけ

.overlay {
    background-image: linear-gradient(to right, #FC466B 0,  #3F5EFB 100%);
}
.label {
    mix-blend-mode: overlay; 
    text-align: center;
    color: #fff;
}

HTML 側をこうすれば上記の合成効果が有効になりました

<div class="overlay ">
    <p class="label">Overlay </p>
</div>

他にも

.label {
    mix-blend-mode: multiply; 
    text-align: center;
    color: #888;
}

Multiply

とか

.label {
    mix-blend-mode: difference; 
    text-align: center;
    color: #fff;
}

Difference

こんな

.label {
    mix-blend-mode: luminosity; 
    text-align: center;
    color: #bbb;
}

Luminosity

合成効果が使えるみたいですね・・・Photoshop のレイヤー合成のものはほぼ使えるのかな？

しっぽを追いかけて

ぐるぐるしながら考えています

CSS でテキストの合成効果をつける