FREE CSS GRADIENT GENERATOR

無料CSSグラデーション作成ツール

色と位置を選ぶだけでlinear-gradientまたはradial-gradient CSSを作成します。

入力と結果はサーバーへ送信・保存されません。

  1. 1種類と色を設定
  2. 2プレビュー確認
  3. 3CSSをコピー

1 · 種類と色を設定

グラデーションを設定

端末内で作成
グラデーション種類
カラーストップ
サンプル

2 · プレビュー確認

作成結果

プレビュー

不透明sRGB HEXとパーセント位置を使用します。結果はCSSで、画像ではありません。

無料CSS背景ガイド

カラーストップで滑らかな背景を作成

登録・インストールなしで線形・放射状を無料作成できます。
1

種類を選ぶ

線形または中心から広がる放射状を選びます。

2

色と位置を調整

2〜5色と0〜100%の位置を設定します。

3

CSSをコピー

プレビューを確認してbackground宣言をコピーします。

CSSグラデーションの仕組み

色の間をブラウザが補間

画像なしで画面サイズに合う色の変化を描画します。

線形

角度で色が流れる方向を決めます。

放射状

円形または楕円形が中心から広がります。

CSS一行

background宣言をスタイルに貼り付けます。

FREE CSS GRADIENT GENERATOR FAQ

CSSグラデーションのよくある質問

無料利用、色数、対応範囲を確認できます。
1無料で使えますか？

はい。登録不要・回数制限なしで無料です。

2色は何個使えますか？

2〜5個のカラーストップを使えます。

3線形と放射状に対応しますか？

はい。角度付き線形と中央の円形・楕円形に対応します。

4画像をダウンロードできますか？

現在はレスポンシブなCSSコードを生成し、画像ファイルは作りません。