プレビュー
ストップをドラッグするか値を変更すると更新されます。
プリセット
バランスのよい配色から始めます。
グラデーション種類
カラーストップ
マーカーをドラッグするか各ストップを編集します。
CSS出力
background宣言または再利用できるクラスをコピーします。
CSSグラデーション生成ツール
線形、放射、円錐のCSSグラデーションを視覚的に作成し、カラーストップをドラッグして本番用CSSをコピーできます。
プライバシー
ブラウザ内でローカル実行します。何もアップロードされません。
主な機能
- ストップをドラッグするか値を変更すると更新されます。
- マーカーをドラッグするか各ストップを編集します。
- CSSをコピー
- クラスをコピー
- ブラウザ内でローカル実行します。何もアップロードされません。
使い方
-
プリセット
バランスのよい配色から始めます。
-
カラーストップ
バー上のマーカーをドラッグして位置を調整します。
-
グラデーション種類
線形 / 放射 / 円錐
-
CSS出力
background宣言または再利用できるクラスをコピーします。
よくある質問
CSSグラデーション生成ツール
線形、放射、円錐のCSSグラデーションを視覚的に作成し、カラーストップをドラッグして本番用CSSをコピーできます。
CSSをコピー
background宣言または再利用できるクラスをコピーします。
ブラウザ内でローカル実行します。何もアップロードされません。
ブラウザ内でローカル実行します。何もアップロードされません。
関連ツール
IMAGE
Color Palette Extractor
Extract HEX, RGB, HSL and CSS color palettes from images.
SVG
SVG to PNG Converter
Export SVG files or code to PNG locally.
IMAGE
Image to Base64 Converter
Convert images to Data URI, CSS url() or raw Base64.
JSON
JSON整形・検証ツール
JSONをローカルで整形、検証、折りたたみ表示。
TEXT-DIFF
テキスト差分比較ツール
元の文章と変更後の文章をローカルで左右表示または統一 diff で比較します。
REGEX
正規表現テスター
強調表示とキャプチャ付きの正規表現テスト。
CRON
Cron式生成ツール
cron式をローカルで生成して説明します。
UUID
UUID / GUID 一括生成ツール
UUID v1、v4、v7 を一括生成して書き出します。