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