IsekaiKit › ツール

CSS グラデーションジェネレーター

バーをクリックするとカラーストップを追加、ドラッグで移動できます。プレビューと CSS はすぐに反映されます。

種類
角度°
形
中心

カラーストップ

バーをクリックで追加 · ドラッグで移動 · 矢印キーで微調整 · Delete で削除

色
不透明度
位置%

プリセット

グラデーションの作り方

線形・円形・扇形から選び、バーの上で色を調整します。空いている所をクリックするとストップを追加、ドラッグで移動、選択中のストップは色と不透明度を変えられます。線形と扇形は角度、円形は形と中心位置を設定できます。「コピー」で CSS を取得しましょう。

線形・円形・扇形の違い

線形(linear)は好きな角度の直線に沿って色が変わり、背景やボタンに最適。円形(radial)は 1 点から外へ広がり、光やスポットライトのような表現に。扇形(conic)は中心の周りをぐるりと回るので、カラーホイールや円グラフが作れます。「繰り返し」をオンにして最後のストップを 100% より手前にすると、ストライプになります。

データは安全?

はい。すべてブラウザの中で処理され、貼り付けた内容がサーバーに送信されることはありません。

ほかにもどうぞ

JSON 整形 JSON の整形・検証・圧縮。エラーは行と列で表示。 Base64 エンコード/デコード UTF-8 対応の Base64 変換。ファイルを data URL にも。 URL エンコード/デコード URL のパーセントエンコード・デコード。クエリパラメータも一覧表示。 UUID 生成 UUID v4 や時系列順の v7 をまとめて生成。 Unix タイムスタンプ変換 エポック秒・ミリ秒と日時を相互変換。 ハッシュ生成 テキストやファイルの MD5・SHA-1・SHA-256・SHA-512。 JWT デコーダー JSON Web Token のヘッダーとペイロードを表示、有効期限もチェック。 正規表現テスター JavaScript の正規表現をリアルタイムでテスト。マッチとグループを表示。 カラーコード変換 HEX・RGB・HSL を相互変換。白・黒文字とのコントラストもチェック。 パスワード生成 条件を選んで強力なランダムパスワードを作成。 CSS ボックスシャドウ生成 影のレイヤーを重ね、プリセットも使って box-shadow の CSS をコピー。 CSV JSON 変換 CSV と JSON を相互変換。引用符・改行・タブ・セミコロンにも対応。 YAML JSON 変換 YAML と JSON を相互変換。構文エラーは行番号で表示。 XML ビューア XML を貼り付けて、表・JSON・整形した XML で確認。 Cron 式ジェネレーター cron のスケジュールを日本語で説明し、次回の実行日時を表示。 サブネット計算 IPv4・IPv6 のサブネット計算。ネットワーク、ブロードキャスト、ホスト範囲、分割も。 テキスト差分チェック 2 つのテキストを比べて、追加・削除された行を表示。