Grabient（ グラビエント）とは
Webブラウザ上でサクッときれいなグラデーション背景を探したり、自分好みに調整したりできる無料のツールです。既存のグラデーションのコレクション（見本）がたくさんあって、それを参考にしたり、自分で色・角度を変えたりしてオリジナルのグラデーションを作れます。
主な機能・特徴
| プリセットギャラリー | 最初からきれいにデザインされたグラデーションの一覧があり「いい感じ」のものを選ぶだけで使える |
| カスタマイズ可能 | 選んだグラデーションの色を変えたり、角度を変えたり、自分のデザインに合うように調整可能 |
| 色コードの取得 | グラデーションに使われている色のコードなどをコピーで、CSSに直接貼ることが可能 |
| シンプルで使いやすい UI | 操作がシンプルで、見本のグラデーションを見ながら直観的に操作可能 |
使い方
インストール、ログイン不要で簡単にすぐに使えます。
①ギャラリーから選ぶ
ページにたくさんのグラデーション見本が並んでいます。まずはその中から「好みの見た目」のものをクリック！プリセット検索も可能で様々にカテゴリから選択可能です。
見本の右上のボタンから、CSS、SVG、PNG、date、colorsとしてワンクリックでコピー可能です。
②色・角度などを調整
選んだグラデーションに対してもし使いたい色が違うならその色を変更できます。
また、グラデーションの種類や角度、色数、彩度、明度などパラメーターを直感的に変更できます。
活用例
- Web サイトのヘッダーやヒーローイメージの背景をおしゃれに見せたいとき
- ボタンやカード要素の背景にグラデーションを使ってアクセントを入れたいとき
- モバイルアプリの背景やスクリーンのデザインで柔らかい色の変化を持たせたいとき
- デザイン案をクライアントに見せるとき、色味を複数パターン提案するときの素材として
- SNS 投稿やバナー画像の背景で目を引く配色を手早く選びたいとき
注意点
※ほとんどのモダンブラウザでは問題なく表示されますが、古いブラウザや特にモバイルの小さな画面でグラデーションが意図どおりに見えないこともあります。複数ブラウザでテストするのがオススメ
related site
