CSS グラデーション

ビジュアルエディターでリニアおよびラジアルの CSS グラデーションをデザインし、CSS をコピーします。

100%無料・制限なし

Presets:

グラデーションタイプ

Angle: 135deg

カラーストップ

100%

プレビュー

CSSコード

background: linear-gradient(135deg, #00ff88 0%, #00ccff 100%);

ビジュアルビルダー

ライブプレビューでグラデーションを視覚的に構築します。色、位置、角度をリアルタイムで調整できます。

3種類のグラデーション

線形、放射状、円錐グラデーションに対応し、方向と形状を完全にコントロールできます。

100%クライアントサイド

データはブラウザから離れません。サーバー通信、ログ記録、トラッキングなし。完全にプライベートです。

CSSグラデーションを作成する方法

The IT Hustle の無料グラデーションジェネレーターで、美しいCSSグラデーションを視覚的にデザインしましょう。

1
グラデーションの種類を選ぶ上部のオプションから線形（linear）、放射状（radial）、円錐状（conic）のグラデーションタイプを選択します。
2
カラーを選ぶカラーピッカーを使ってグラデーションストップを設定します。複雑なグラデーションには複数のストップを追加できます。
3
方向を調整する線形グラデーションでは角度を設定します。放射状グラデーションでは形状と位置を選択します。
4
CSSコードをコピーする「コピー」ボタンをクリックして生成されたCSSコードをコピーし、スタイルシートに貼り付けます。

直線的に変化する線形グラデーション、円形に変化する放射状グラデーション、角度ベースで変化する円錐状グラデーションに対応しています。

はい。カラーストップを好きなだけ追加して、複雑な多色グラデーションを作成できます。各ストップの位置も細かく設定できます。

はい。Chrome、Firefox、Safari、Edgeなど、すべてのモダンブラウザに対応した標準的なCSSグラデーション構文を使用しています。