アプリで3色以上を使ったグラデーションを実装するときに使用したグラデーションジェネレータサービスをご紹介。
「CSS Gradient」というサービスで、複数の色を指定でき、また色の切り替え位置も指定することができます。
CSS Gradient — Generator, Maker, and Background
https://cssgradient.io/
ページのスクリーンショットはこちら。
黄緑色のグラデーションを作っていた時の画面です。
4色の色を指定して、それぞれの色が切り替わる地点も指定できました。
また、色の指定もカラーコードだけでなく、カラーピッカーもあるので、結果を見ながらそれぞれの色を微調整できるのも便利でした。
最後、色が決まったら、下に CSS コードが生成されているので、こちらをコピーすることで簡単に Web ページに実装出来ます。
なお、このサイトはこちらのページで紹介されていました。
おすすめのCSSグラデーションジェネレーター13個まとめ | Web Design Trends
https://webdesign-trends.net/entry/4799
他にも、配色サンプルを紹介しているサイトもあるので、まずここから使いたいグラデーションの配色を調べ、その後「CSS Gradient」を使って微調整していくとやりやすいと思います。
以上、CSSコードを生成できるグラデーションジェネレーターサービス「CSS Gradient」のご紹介でした。
直感的に使えるサービスなので、操作で困ることはないと思います。
ご参考になれば幸いです。
