CSSグラデーションジェネレーター

グラデーションをビジュアルでデザインして、CSS をワンクリックでコピー。

報告
左で種類とストップを調整し、右でプレビュー。完成したら「コピー」で CSS を取得。
グラデーション設定
135°
プレビューとコード
1
種類を選ぶ
リニア・放射・コニックから選択します。放射では楕円か円形かも選べます。
2
方向や角度を決める
リニアとコニックは角度スライダーで回転します。放射では角度欄が隠れ、形状で広がり方を調整します。
3
色とストップを編集
スウォッチでカラーピッカーを開くか、6 桁の HEX を入力します。位置スライダーで各ストップの割合を決めます。
4
プレビュー・コピー・リセット
右側にプレビューと CSS が表示されます。プリセットで素早く始めたり、ツールバーのリセットで初期の 2 色に戻せます。

背景系のスタイルに貼り付けて使えます。透明にしたい場合は、コピー後に色を半透明の指定へ書き換えてください。

どんな場面で便利ですか?
ヒーローエリアやボタン、カードの背景を彩りたいとき。写真の上にグラデーションを重ねて文字を読みやすくしたいとき。デザイン確定前に配色の雰囲気を素早く試したいときに向いています。
リニア・放射・コニックの違いは?
リニアは直線方向に色が混ざり、バナー向きです。放射は中心から外へ広がり、スポットライト的な表現に適します。コニックは中心を軸に色が回り、円グラフのような見え方になります。
透明にフェードさせられますか?
できます。いったんグラデーションを作って CSS をコピーし、色の一つを半透明の指定や対応している透明キーワードに置き換えてからスタイルシートへ貼り付けてください。
出力 CSS はブラウザで使えますか?
リニアと放射は主要ブラウザで広く使えます。コニックは最新の常時更新ブラウザで一般的に利用可能です。非常に古い環境向けなら、小さなページで実機確認してから採用を決めると安心です。
カラーストップは 2 つ固定ですか?
なめらかなグラデーションには最低 2 色が必要です。より細かい変化が欲しいときは「ストップを追加」で 3 色目以降を足し、それぞれの位置を調整できます。
プリセットを押すと何が変わりますか?
そのプリセットの色と角度が適用され、種類はリニアに戻ります。初期の 2 色構成に戻したいときは、ツールバーの「リセット」を使ってください。
画像圧縮 ミーム作成 SNSマーケティング
2026-05-17

オンライン画像圧縮・編集ツール:高画質なミームとSNS投稿画像作成ガイド

バズるミームやSNS画像を作りたいのに、サイズ制限や低画質でお困りですか?この記事では、オンライン画像圧縮ツールやカラー変換ツールを使って、画質を保ちながら目を引くビジュアルを作成する方法を解説します。

画像処理 カラー空間 画像圧縮
2026-06-24

デジタル画像の最適化:カラー空間から圧縮アルゴリズムまでの深層意思決定ガイド

画像フォーマット選択の根本論理を掘り下げ、SVGとビットマップの性能と視覚的損失の差異を解析し、専門的な画像処理の意思決定を支援します。

画像最適化 Webパフォーマンス SVG
2026-06-14

ビジュアルアセット最適化:SVGとビットマップのシナリオ別選択ガイド

Webサイトの読み込み速度と視覚体験のバランスをとる際、適切な画像フォーマットの選択が重要です。本記事ではSVGと従来のビットマップのメカニズムを解説し、実践的な意思決定戦略を提供します。

画像処理 フォーマット最適化 Webパフォーマンス
2026-06-14

デジタル画像の視覚最適化:色空間、圧縮アルゴリズム、フォーマット選択の実務

画像処理の核心メカニズムを深く掘り下げ、色空間の選択からベクターとラスターフォーマットの性能比較まで、Webやデザインワークフローで最適な意思決定を行うためのガイド。

画像処理 画像フォーマット 視覚最適化
2026-06-09

画像フォーマット選択の論理:色忠実度からネットワーク転送までの意思決定マトリックス

画像フォーマットの基盤メカニズムを解析し、SVGベクター画像とビットマップ(PNG/JPG/WebP)の各シーンにおける使い分け戦略と視覚最適化の指標を解説します。

画像処理 画像最適化 カラースペース
2026-06-04

デジタル画像処理:カラーフォーマットと圧縮技術の最適化戦略

デジタル画像の中核技術を深く掘り下げ、カラースペースの選択から圧縮アルゴリズムの応用まで、画質とファイルサイズの最適なバランスを見つける方法を解説します。