カテゴリー: 開発ツール
CSS グラデーション生成
線形・放射グラデーションを作って CSS をコピー
2 色または 3 色を選び、角度を調整してライブプレビューを確認し、そのまま貼り付けられる background-image 宣言をコピーできます。すべてブラウザ内で描画されます。
出力
background-image: linear-gradient(135deg, #0f7b63 0%, #1f4f7a 100%);
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
グラデーションは手で書くより目で確かめたほうが早いので、このツールは操作に合わせて実際の CSS をプレビュー面に描画します。角度を度数で指定する線形グラデーションか、中央から広がる放射グラデーションを選び、必要なら中間色を足して 3 段階のブレンドにし、宣言をそのままスタイルシートへコピーできます。
使い方
- 線形か放射かを選びます。
- 開始色と終了色、必要なら中間色を選びます。
- 角度を調整し、CSS 宣言をコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- 何かアップロードされますか。
- いいえ。プレビューはブラウザが描く CSS の背景で、宣言もページ内で組み立てられます。サーバーには何も送られません。
- ベンダープレフィックスは必要ですか。
- 現行のブラウザには不要です。プレフィックスなしの linear-gradient と radial-gradient は長年サポートされています。
- 角度はどちら向きですか。
- CSS では 0deg が下から上で、角度は時計回りに増えます。したがって 90deg は左から右、180deg は上から下になります。