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.
カラーストップColor stops
最大8色まで追加できますUp to 8 color stops
使い方・ユースケース 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.
