カラーツール

CSSグラデーション作成：線形・円形・扇形【無料】

無料・登録不要で、ブラウザで動作します。 最大8つのカラーストップで、線形・円形・扇形（conic）のグラデーションをデザインし、プレビューを見ながらCSSをコピーできます。よく使うサイズのPNG背景としてダウンロードすることもできます。

種類

カラーストップ

CSS

background: #ff7ac6;
background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);

1行目は、グラデーションを表示できないとても古いデバイス向けの単色です。

プリセットから始める

お使いのデバイス上で作成されます。

CSSグラデーション作成を使う理由

完全無料
何度でもお使いいただけます。登録不要、透かしなし、インストールも不要です。
プライバシーを重視した設計
入力した内容はブラウザ内にとどまり、当社に送信されることはありません。
どのデバイスでも使える
Windows、Mac、Linux、Android、iPhone のブラウザで動作します。アプリは不要です。

CSSグラデーション作成の使い方

  1. 線形、円形、扇形のいずれかを選び、方向を設定します。
  2. 色を選び、各ストップをドラッグして配置します。
  3. CSSをコピーするか、グラデーションを画像としてダウンロードします。

よくある質問

CSSはどう使いますか？
色を付けたい要素のルールに貼り付けます。1行目は単色のフォールバック、2行目がグラデーションです。
線形・円形・扇形の違いは？
線形は直線に沿って、円形は中心から外側へ広がるように、扇形は色相環のように中心の周りをぐるりと色が変わります。
透明度を使えますか？
はい。ストップに rgba(47, 91, 255, 0.5) のような色を入力してください。
何かアップロードされますか？
いいえ。グラデーションは端末内で作成されます。
CSSグラデーション作成は無料ですか？
はい。無料でお使いいただけます。登録もインストールも不要です。

ヘルプと使い方ガイド（英語）

関連ツール