CSSグラデーション生成
視覚的にグラデーションを作成。CSSコードをそのままコピー。
135°
カラーストップ
0%
100%
CSS
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);プリセット
❓ よくある質問
linear-gradientとradial-gradientの違いは？
linear-gradientは直線方向にグラデーションが変化し、角度で方向を指定します。radial-gradientは中心から外側に向かって変化します。
グラデーションのブラウザ対応は？
現在のモダンブラウザはすべてCSS3グラデーションに対応しています。IE9以下のみ非対応ですが、現在のブラウザシェアではほぼ問題ありません。
カラーストップとは？
グラデーション上の各色の位置を指定するポイントです。位置はパーセンテージで指定し、ブラウザが各ストップ間の色を自動的に補間します。
🔧 関連ツール
C
カラーコード変換
HEX・RGB・HSLを相互変換。カラーピッカーで直感的に色を選択。
⊞
アスペクト比計算
画像・動画のアスペクト比を計算。SNSや動画サイトの推奨サイズも一覧表示。
🔲
CSSボックスシャドウ生成
box-shadowをスライダーで直感操作。複数レイヤー・プリセット対応。
🖼
画像Base64変換
画像ファイルをBase64に変換。Data URI形式でHTML・CSSに埋め込み可能。
⬜
CSS Flexbox生成
Flexboxレイアウトを視覚的に作成。direction・justify・align等を直感操作。
⭐
ファビコン生成
テキストや絵文字からファビコンを生成。複数サイズ対応。ダウンロード可能。