メインコンテンツにスキップ
ToolShed
ホーム
人気
新着ツール
すべてのツール
読み込み中...
ホーム
デザイン・CSS
CSSグラデーション生成
デザイン・CSS
無料
登録不要
CSSグラデーション生成
CSSの線形(linear)・放射状(radial)グラデーションをGUIで作成。角度・色停止点を自由に設定。コードをワンクリックコピー。無料ツール。
Linear
Radial
Conic
Angle: 135°
Color Stops
+ Add Stop
#3b82f6
at
%
#8b5cf6
at
%
CSS Output
Copy CSS
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
プリセット
Ocean Breeze
Sunset
Forest
Aurora
Fire
Radial Glow
Mint Fresh
Rose Gold
Conic Rainbow
Twilight
FAQ
よくある
質問
CSSグラデーションの種類にはどんなものがありますか?
+
linear-gradient(直線的)、radial-gradient(放射状)、conic-gradient(円錐形)の3種類があります。それぞれ方向、中心点、色の停止位置を指定してカスタマイズできます。
CSSグラデーションはすべてのブラウザで対応していますか?
+
グラデーションを背景画像の代わりに使うメリットは?
+
バリエーション
関連
バリエーション
グラデーションギャラリー
関連ツール
こちらも
おすすめ
CSSアニメーション生成
CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。Web開発に便利な無料ツール。
CSSボタン生成
色・サイズ・角丸・影などを調整してCSSボタンを作成。コピペで使えるCSSを出力する無料オンラインツール。
CSS clip-path生成
CSS clip-pathをプリセットやカスタムで生成。円・楕円・多角形に対応。CSSコードをコピペで使える無料オンラインツール。
CSS段組み生成
CSSマルチカラムレイアウト(columns)をGUIで設定して生成。ブログや記事のレイアウトに便利な無料オンラインツール。
フォントペアリング
Google Fontsから見出し・本文のフォント組み合わせをプレビュー。デザインのフォント選びに便利な無料オンラインツール。
フォントサイズ変換
px・pt・em・rem・%のフォントサイズを相互変換。CSSのタイポグラフィ設定に便利な無料オンラインツール。
CSS Gradient Generator | Design & CSS | ToolShed | ToolShed