みなさんこんにちは、プロクラスの村瀬です！
今回はグラデーションを視覚的、感覚的に分かりやすく生成することができ、デザイン制作のヒントやコーディングの際に必要なCSSコードを簡単に出力してくれるジェネレーターを3つご紹介します！
視覚的なグラデーション調整ができてCSSコードもコピーできる【CSS Gradient】
こちらは視覚的に色相・彩度・明度だけでなく、グラデーションの色の切り替えポイントや透明度なども細かく調整でき、CSSコードもコピーできるジェネレーターです。
実際のコーディング時、背景色を指定する際にかなり活躍してくれます。特に、色の切り替えポイントなどの指定を画面で見ながら調整できるのでとても重宝しています。
明度・彩度・色相を段階的に変化させたカラーパレットを作れる【Color Scale Generator】
こちらはベースのカラーを一つ決め、そこから明るい色・暗い色を段階的に作ってくれるジェネレーターになります。下の数値を変更して色数・明度・彩度・色相を自由に変えることができます。色の部分をクリックするとカラーコードをコピーできます。
実際のデザイン制作時、進捗状況を表すようなアイコンを5つ並べた際に、背景色でも違いを出したい！という場面で大活躍してくれました。微妙な色の調整もできるのでとてもおすすめです。
メッシュグラデーションを簡単に作成、CSSのコピーができる【Mesher】
こちらは視覚的に簡単にメッシュグラデーションを作成できるジェネレーターになります。色数や位置も変更でき、CSSコードもコピーできるので印象的なグラデーションを使いたい場面で活躍します。
いかがだったでしょうか？どのジェネレーターも簡単に調整ができるので、ぜひ活用してみてください！