メインコンテンツにスキップ
ToolShed
ホーム
人気
新着ツール
すべてのツール
読み込み中...
ホーム
デザイン・CSS
グラデーションギャラリー
デザイン・CSS
無料
登録不要
グラデーションギャラリー
デザインに使える美しいグラデーション配色をギャラリー形式で一覧表示。CSSコードをワンクリックコピー。Web制作のインスピレーションに。無料ツール。
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アニメーション生成
CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。Web開発に便利な無料ツール。
CSSボタン生成
色・サイズ・角丸・影などを調整してCSSボタンを作成。コピペで使えるCSSを出力する無料オンラインツール。
CSS clip-path生成
CSS clip-pathをプリセットやカスタムで生成。円・楕円・多角形に対応。CSSコードをコピペで使える無料オンラインツール。
CSS段組み生成
CSSマルチカラムレイアウト(columns)をGUIで設定して生成。ブログや記事のレイアウトに便利な無料オンラインツール。
フォントペアリング
Google Fontsから見出し・本文のフォント組み合わせをプレビュー。デザインのフォント選びに便利な無料オンラインツール。
フォントサイズ変換
px・pt・em・rem・%のフォントサイズを相互変換。CSSのタイポグラフィ設定に便利な無料オンラインツール。
Gradient Gallery | Design & CSS | ToolShed | ToolShed