「グラデーション」といえば、インスタグラムのアイコンから、おしゃれなサービスのサイトやバナーまで、最近人気がある表現の一つですよね。色の表現枠が広がり、組み合わせ方や滲ませ方などのちょっとした工夫でどんなイメージにもしやすく、簡単にオシャレに見せやすいところも人気の理由なのではないでしょうか。Design」でも紹介されていた「cssgradient」と、そのサービスの一つ「gradient-backgrounds」について見ていきます。more!目次どういうサービスなのか?中身を解説!CSSグラデーションのまとめサイトかゆい所に手が届く、いいサービス利用はこちらからどういうサービスなのか?中身を解説!「cssgradient」というサイトですが、簡単にいうと自分の好きな色でグラデーションを生成することができます。色の選択も多岐から操作でき、グラデーション効果も角度も細かく指定することができます。『Photoshopでいいのでは?』と思われるかもしれません。このサイトのすごいところは、作ったグラデーションをリアルタイムでコード書き出ししてくれるんです。コードが得意な人ならこの程度...となるかもしれませんが、私のようにコーディングはまだちょっと...といった方にも非常に優しいサービスです!色指定はカラーコードからRGBAなどから指定ができるので、コードにしたいけど分からない!と言った場合も逆算できます。Design」の中でもグラデーション生成・検索のサービスはいくつかありますが「gradient-backgrounds」は、”9つのサービスのグラデーション生成サービスを、1つのサイトで閲覧できる”という便利なサービスなんです!これは最近新しく増えたようで、サイトでもNEWの文字が目立ちます。cssgradient.iohttps://cssgradient.io/gradient-backgrounds/https://cssgradient.io/gradient-backgrounds/まとめサイトのようなものですね。グラデーションと言っても各サイト、色々と特色があって面白いんです。パステルカラーが強いサイト、奇抜な色を組み合わせているサイト、CSSだけではなくHTMLでのコード生成ができるサイトや、2色ではなく3色を組み合わせているサイト...などなど。一部サイトのみの対応ですが、コードを表示・コピーできます。メモ・保存しておくことで、いざコーディングをするときも調べる必要がありません。画像ファイル(png等)で書き出されるサイトもあるので、用途によって使い分けもできますね。Swatches」というCSSでのグラデーション色見本メインのページなど、グラデーションにまつわるアレコレをページ内で紹介しています。全て英語ですが、翻訳機能でなんとなく読めますし、ブログ内では実装の仕方なども解説していて非常に便利です!このサイト自体のUIやアニメーションも工夫されており、便利サイトである前にクリエティビティなサイトを構成できているところが細かさを感じます。海外のサイトですが操作も直感的なのでわかりやすく、Webサイトデザインやアプリデザインのアイデアや、コーディングで困った時の救世主になり得るのではないでしょうか。もりむし未経験×独学からデザイナーになりたくてなった人。@yoshikikoji『気になるプロダクト』の記事デザインがめちゃくちゃ良いビデオメッセージングアプリtribeをはじめてみたけど友だちがいない...FacebookメッセンジャーがSnapchatみたいに。Fontsの日本語表示を確認できるオンラインツール「Fonty」が登場!91カ国語に対応しているサイトの多言語化サービス「MulCMS」が便利そうOsmoが欲しい。