CSSグラデーション生成
色を入れて、宣言を受け取る。
例を読み込むと入力と設定が一時的に変わります。元の内容に戻せます。
0文字
出力
上に貼り付けるか入力すると、ここに結果が表示されます。
ファイルは端末の外に出ません
このツールはすべてブラウザ内で動作します。貼り付けた内容は端末内で処理され、サーバーには送信されないため、トークンや鍵、未公開の文章でも安心して使えます。
使用例
計算・変換例 — CSSグラデーション生成
入力行を順番に入力し、以下の設定を使います。結果を出力行と比較してください。
| 項目 | 値 |
|---|---|
| 入力 1 | #ff0000 |
| 入力 2 | #0000ff |
| 種類 | 線形 |
| 角度（度） | 90 |
| 繰り返し | オフ |
| 出力 1 | background: #ff0000; |
| 出力 2 | background: linear-gradient(90deg, #ff0000, #0000ff); |
| 出力 3 | background-image: linear-gradient(90deg, #ff0000, #0000ff); |
90 度の線形グラデーションは左の赤から右の青へ変化します。単色の赤は代替表示用です。
使い方
- 1行に1色ずつ書きます。hex・rgb()・hsl()・色名、CSSで使える書き方ならどれでも。
- 色の後ろに位置を書くと、そこで止まります。「#000 80%」。
- 線形・放射状・扇形と、角度または中心を選びます。
- 宣言をコピーします。
よくある質問
- なぜ最初に単色を出すのですか？
- フォールバックです。グラデーションを解釈できないもの——古いブラウザ、メールクライアント、PDFレンダラ——は最初の宣言を使い、次を無視します。これがないとそれらには背景が付かず、単色より悪い結果になります。
- 180degはどちら向きですか？
- 下向きです。CSSでは0degが上で、そこから時計回りに増えます。古い-webkit-の書き方や多くのデザインツールとは逆で、ここがいちばん間違えられます。
- ドラッグする画面ではないのはなぜですか？
- 画面はコードレビューに貼れないからです。ここで出るのは宣言なので、差分が取れ、コミットでき、次にそのファイルを開いた人が読めます。
- conicは何に使いますか？
- 中心のまわりを回るもの——円グラフ、カラーホイール、読み込み中の表示です。3つのうち、他の2つで代用しにくいのがこれです。
- サーバーに送信されますか？
- いいえ。ブラウザの中だけで動くので、入力した内容はお使いのパソコンから出ません。