CSSグラデーション生成CSS Gradient Generator
linear/radialグラデーションをビジュアル生成。色・角度・位置を調整してCSSをコピー。Generate linear/radial gradients visually. Adjust colors, angle, and position, then copy the CSS.
お気に入りについて About favorites
この端末のブラウザにのみ保存され、サーバーには送信されません。 Saved on this device only—never sent to our servers.
グラデーションタイプGradient type
カラーストップColor stops
最大8色まで追加できますUp to 8 color stops
他にも100以上のツールがあります There are 100+ other tools
他のツールも見る See other tools使い方・ユースケース How to Use & Use Cases
線形または円形グラデーションを選び、色・角度・位置・カラーストップを調整します。プレビューで見た目を確認しながら、生成されたCSSをコピーしてスタイルシートに貼り付けられます。 Choose linear or radial gradient, adjust colors, angle, position, and color stops. Preview the result and copy the generated CSS into your stylesheet.
ボタンやヒーローセクションの背景デザイン、LPの見出し帯のグラデーション作成、既存サイトの配色に合わせたCSSを素早く試したいときなど、Web制作の現場で使えます。 Use it for button or hero backgrounds, landing-page header gradients, or quickly testing CSS that matches an existing site's palette during web development.
よくある質問FAQ
線形・円形どちらのグラデーションに対応していますか？Are both linear and radial gradients supported?
linear-gradient（線形・直線的な色の変化）とradial-gradient（円形・中心から外側への色の変化）の両方に対応しています。Yes. linear-gradient (straight color transitions) and radial-gradient (circular from center outward) are both supported.
カラーストップとは何ですか？What is a color stop?
グラデーションの色の切り替わりポイントです。たとえば「赤 0%・青 100%」なら左端が赤、右端が青のグラデーションになります。中間に「黄 50%」を追加すると赤→黄→青の3色グラデーションになります。A point where the gradient color changes. For example, red at 0% and blue at 100% gives a red-to-blue gradient. Add yellow at 50% for a red-yellow-blue gradient.
色は何色まで追加できますか？How many colors can I add?
カラーストップは最大8色まで追加できます。2色未満にはなりません。Up to 8 color stops. At least 2 are required.
角度（線形グラデーション）の0°はどの方向ですか？Which direction is 0° for linear gradients?
0°が上から下、90°が左から右、180°が下から上、270°が右から左です。斜めのグラデーションは45°や135°で表現できます。0° is top to bottom. 90° is left to right. 180° is bottom to top. 270° is right to left.
生成したCSSはどこに貼ればいいですか？Where do I paste the generated CSS?
CSSファイルの該当する要素のスタイルに貼り付けてください。例えばbodyやdivの背景に使う場合は background: linear-gradient(...); のように記述します。background-colorと併用している場合はbackgroundの記述が優先されます。Paste it into a CSS file or <style> tag, targeting the element you want to style (e.g., background: linear-gradient(...)).
透明度（半透明）のグラデーションは作れますか？Can I create semi-transparent gradients?
このツールでは不透明色のみ対応しています。半透明にしたい場合は、生成したCSSの色部分を手動でrgba形式（例：rgba(255,0,0,0.5)）に書き直してください。This tool supports opaque colors only. To add transparency, manually edit the generated CSS to use rgba values.
生成したCSSはどのブラウザで動きますか？Which browsers support the generated CSS?
モダンブラウザ（Chrome・Firefox・Safari・Edge）すべてで動作します。ベンダープレフィックス（-webkit-など）は現在のブラウザでは不要です。It works in all modern browsers: Chrome, Firefox, Safari, and Edge.
ページを閉じれば、端末内のデータは自動的に消去されます。契約書や顧客資料など、慎重に扱うデータも安心してご利用ください。When you close the page, data on your device is cleared automatically. Safe for sensitive files such as contracts and client documents.
