CSSグラデーションギャラリー
CSSグラデーションギャラリーは、たくさんのサンプルからグラデーションを選び、CSSをかんたんにコピーできる無料ツールです。
作成したCSSや調整内容は、サーバーに送信・保存されません。ブラウザ上でプレビューして、その場でコピーできます。
主な機能
- CSSグラデーションを一覧から選択
- ピンク、青、紫、金、ネオン、夕焼け、空・海、和風などから探せる
- キーワード検索に対応
- linear-gradient、radial-gradient、conic-gradientを切り替え
- 角度、色、カラーストップ位置を調整
- ライブプレビューを見ながら編集
- 完成したCSSをコピー
できること
雰囲気から探せる
カテゴリや検索を使って、使いたい雰囲気のグラデーションを探せます。背景、見出し、ボタン、カードなど、デザインの方向性を決めたいときに便利です。
CSSを見ながら調整できる
linear、radial、conicを切り替えたり、角度や色の位置を調整したりできます。サンプルをベースに、自分のサイトに合うCSSへ近づけられます。
すぐコピーして使える
完成したグラデーションCSSは、ワンクリックでコピーできます。CSSに慣れていない場合でも、サンプルを選んで調整しながら使えます。
使う前のチェック
- 文字を重ねる場合は、背景とのコントラストを確認してください。
- 派手なグラデーションは、使う面積を小さめにすると扱いやすくなります。
- ブラウザによって見え方が少し変わる場合があります。
安心して使うために
検索語や調整内容は、ブラウザ内だけで処理されます。サーバーに送信・保存されません。
