CSS グラデーション 生成

グラデーションを組んで CSS をコピー。

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

処理はブラウザのタブの中

  • 2つの種類
  • CSSすぐ貼れる
  • Live即時の見本
  • 0件の送信
仕様

CSS グラデーション 生成の仕様

入力
種類・角度・停止点
出力
見本とコピーできる CSS
種類
線形と放射
見本の出どころ
同じ CSS をブラウザが描く
料金
無料
登録の要否
不要
処理する場所
端末の中で
使い方

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

  1. 1

    種類を選ぶ

    線形か放射かを選ぶ

  2. 2

    色の停止点を置く

    色の停止点を置く

  3. 3

    CSS をコピー

    CSS をコピーする

よくある質問

よくある質問

色の停止点はいくつまで置けますか？

流れに要るだけ置けます。二つで最も単純なグラデーションになり、足すごとにブラウザが通る点が一つ増えます。

見本は自分のページと同じになりますか？

コピーするのと同じ CSS をブラウザが描いているので、同じ大きさの要素に当てれば同じになります。

画像として書き出せますか？

できません。この画面が渡すのは CSS です。式ではなくファイルが要るなら、別の場所で作ってください。

作ったグラデーションは送られますか？

送られません。このブラウザのタブの中で組み立てます。何も上げず、口座に残すこともありません。

解説

崩れないグラデーション

線形か放射かを選び、角度を決めて、設計に要るだけ色の停止点を足します。見本は CSS そのものなので、見えているものがコピーされます。

  • 明るさの近い二色はなめらかに混ざり、離れた二色は帯が見えることがあります。
  • グラデーションの上の文字は端ごとに背景が違うので、いちばん明るい所と暗い所で確かめてください。
  • 線形は角度でいちばん変わるので、色を詰める前に角度を決めてください。
  • 式は要素の背景を書く場所に貼り、その要素に埋める大きさを与えてください。

仕様をすべて見る

CSS グラデーション 生成ツールの仕様
入力グラデーションの種類、角度、そして二つ以上の色の停止点。
出力その場の見本と、それを描く CSS。そのままコピーできます。
種類線形と放射。どちらも CSS 本来のグラデーションとして組み立てます。
見本の出どころブラウザが、あなたがコピーするのと同じ CSS を描いています。
料金無料。作業の外に、広告と分かる形で広告が出ます。
登録の要否不要。
処理する場所このブラウザのタブの中。入力は送りません。
次にできること

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

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