CSS Mix Blend Mode ジェネレーター
CSSのmix-blend-modeプロパティをリアルタイムでプレビュー。16種類のブレンドモードを試せます。
プレビュー
BLEND
現在のモード: multiply
全ブレンドモード一覧
設定
CSS コード
mix-blend-mode: multiply;
opacity: 1;主なモード
- • multiply: 乗算（暗く）
- • screen: スクリーン（明るく）
- • overlay: オーバーレイ
- • difference: 差の絶対値
- • color: 色相と彩度を適用
- • luminosity: 輝度を適用
mix-blend-mode について
- • 要素の内容と背景をどのように合成するかを指定
- • Photoshopなどのグラフィックソフトのブレンドモードと同等
- • テキスト、画像、動画など任意の要素に適用可能
- • 全モダンブラウザでサポート
- • background-blend-modeは背景レイヤー間の合成に使用