グラデーションのお悩みを解決！『cssgradient』を使ってみた

「グラデーション」といえば、インスタグラムのアイコンから、おしゃれなサービスのサイトやバナーまで、最近人気がある表現の一つですよね。
色の表現枠が広がり、組み合わせ方や滲ませ方などのちょっとした工夫でどんなイメージにもしやすく、簡単にオシャレに見せやすいところも人気の理由なのではないでしょうか。

今回は、こちらの「35 New Tools for UI Design」でも紹介されていた「cssgradient」と、そのサービスの一つ「gradient-backgrounds」について見ていきます。

Prototypr

✨ 35 New Tools for UI Design – Prototypr

https://blog.prototypr.io/35-new-tools-for-ui-design-412cf1d701fd

Toolbox #6: Adobe Fund for Design, React for Designers, Gradient Backgrounds, and more!

どういうサービスなのか？中身を解説！

「cssgradient」というサイトですが、簡単にいうと自分の好きな色でグラデーションを生成することができます。
色の選択も多岐から操作でき、グラデーション効果も角度も細かく指定することができます。

cssgradient.io

https://cssgradient.io

生成画面

『Photoshopでいいのでは？』と思われるかもしれません。が、このサイトのすごいところは、作ったグラデーションをリアルタイムでコード書き出ししてくれるんです。

コードが得意な人ならこの程度…となるかもしれませんが、私のようにコーディングはまだちょっと…といった方にも非常に優しいサービスです！
色指定はカラーコードからRGBAなどから指定ができるので、コードにしたいけど分からない！と言った場合も逆算できます。

CSSグラデーションのまとめサイト

「35 New Tools for UI Design」の中でもグラデーション生成・検索のサービスはいくつかありますが「gradient-backgrounds」は、”9つのサービスのグラデーション生成サービスを、１つのサイトで閲覧できる”という便利なサービスなんです！
これは最近新しく増えたようで、サイトでもNEWの文字が目立ちます。

cssgradient.io

https://cssgradient.io/gradient-backgrounds/

まとめサイトのようなものですね。
ひとえにグラデーションと言っても各サイト、色々と特色があって面白いんです。
パステルカラーが強いサイト、奇抜な色を組み合わせているサイト、CSSだけではなくHTMLでのコード生成ができるサイトや、２色ではなく３色を組み合わせているサイト…などなど。
一部サイトのみの対応ですが、コードを表示・コピーできます。メモ・保存しておくことで、いざコーディングをするときも調べる必要がありません。
また画像ファイル（png等）で書き出されるサイトもあるので、用途によって使い分けもできますね。

かゆい所に手が届く、いいサービス

今回紹介した「cssgradient」ですが、今回ピックアップした「graddient-backgrounds」をはじめ「CSS Gradient Swatches」というCSSでのグラデーション色見本メインのページなど、グラデーションにまつわるアレコレをページ内で紹介しています。
全て英語ですが、翻訳機能でなんとなく読めますし、ブログ内では実装の仕方なども解説していて非常に便利です！

このサイト自体のUIやアニメーションも工夫されており、便利サイトである前にクリエティビティなサイトを構成できているところが細かさを感じます。
海外のサイトですが操作も直感的なのでわかりやすく、Webサイトデザインやアプリデザインのアイデアや、コーディングで困った時の救世主になり得るのではないでしょうか。
ぜひ使ってみてください！