CSS グラデーション作成

線形・円形のグラデーションを作って CSS をコピー。

無料 · 登録不要 · 端末内で処理

処理はブラウザの中だけ

  • 即時結果
  • 0送信
  • 1 tapコピー可
  • 無料登録不要
実際の使い勝手

安心して使えるポイント

  • 0件の送信
    • 入力はこの端末に残ります
    • 処理のための送信はなし
  • 即時つの出力
    • 作業エリアで結果を更新
    • 入力を変えてすぐ比較
  • 1 tap回でコピー
    • 結果をコピー
    • 登録もインストールも不要
仕様

CSS グラデーション作成ツールの仕様一覧

入力
種類・角度・2つ以上の停止点
出力
プレビューと貼れる CSS
方式
標準 CSS をブラウザで組立
ストップと形状
各ストップに位置指定
料金
無料
処理する場所
あなたの端末の中
使い方

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

  1. 1

    種類と角度を選ぶ

    線形か円形かを選び、向きに合わせて角度を決めます。

  2. 2

    色の停止点を置く

    各停止点に色と位置を決め、必要なら足したり外したりします。上の帯が毎回描き直されます。

  3. 3

    CSS をコピーする

    結果欄は完成した background の1行です。コピーすれば、そのままスタイルシートに貼れます。

よくある質問

よくある質問

アップロードなしで使える？

はい。入力はブラウザのタブの中で処理されます。処理用のサーバーに送られることも、アカウントに保存されることもありません。

コピーする前に結果を変えられる？

はい。操作するたびに結果が更新されます。求めている出力になってからコピーしてください。

対応ブラウザは？

Chrome・Edge・Firefox・Safari の最新版であれば、ここで使う機能に対応しています。かなり古いブラウザでは必要な機能がないことがあります。

解説

中間がくすまないグラデーションにするには

色相環で離れた 2 色は、交わるところで灰色を通ります。その間の色相を持つ 3 つ目のストップを置くと、中間の彩度が保たれます。

  • 角度は上を 0 として時計回りに進みます。0deg は下から上、90deg は左から右、135deg は斜めです。
  • 放射状グラデーションでは角度は使われません。色の変わる位置を動かしたいときは、ストップの位置を調整してください。

仕様をすべて見る

CSS グラデーション作成ツールの仕様
入力グラデーションの種類、角度、そして2つ以上の色の停止点。
出力その場で変わるプレビューと、そのまま貼れる CSS。
方式ブラウザ標準の CSS グラデーションを、その場で組み立てます。
ストップと形状各ストップに 0〜100％の位置スライダー。最少 2 つまで削除可。放射状を選ぶと角度欄は非表示に。
料金無料。作業領域の外に、広告と分かる形で広告を出しています。
処理する場所このブラウザのタブの中。入力がアップロードされることはありません。
次にできること

同じファイルのまま続ける

カラーツール一覧： SPOTTOOLSのカラーツール