CSS Duotone Generatorの使い方

CSS Duotone Generatorの使い方

「Duotone」は「Duo(2つの)」+「tone(色)」をあわせた言葉で、ベースとなるミドルトーンとハイライトカラーの2色で描かれた画像のこと。
数年前から流行っていますが、最近ではデザインとして定着しています。
そんなDuotoneカラーを画面を見ながら選択して最後にCSSを書き出してくれる「CSS Duotone Generator」の使い方を紹介しています。

CSS Duotone Generator

「CSS Duotone Generator」のサイトはこちら https://cssduotone.com/
CSS Duotone Generatorはオンライン上ですぐに使用が可能です。会員登録などもありません。

CSS Duotone Generatorの使用方法

画像のアップロード、zoom、Spacing(余白)、Blur(ぼかし)、Image Opacity(画像透明度)、Image Color(イメージカラー)とBackground Color(背景色)の選択、また各色のモードが選択できます。
色の組み合わせとして、「Default」、「Spotify」、「Vintage」、「Blade Runner」、「Law & Order」、「Moody」、「Ursula」、「Random」の8種類のプリセットも用意されています。

使用方法はこのような感じです

HTML+CSSの書き出し

今回は用意した画像をPANTONEが発表した2021年のトレンドカラーの、「Ultimate Gray(アルティメットグレイ)#939597」と「Illuminating(イルミネイティング)#F5DF4D」のDuotoneカラーに設定して、HTML+CSSの書き出しをしてみます。


書き出したソースコード

画像のソースコードだけは手動で変更しないといけないようなので、手動で変更します。


ブラウザ上で表示した結果
(max-widthのみ追加していますが上のコードで表示しています)

元画像はこちら