---
title: "CSSグラデーションジェネレーター - グラデーションのCSSコードを作成"
description: "linear-gradient と radial-gradient のCSSコードを生成できるツールです。色、角度、位置を調整しながら、背景グラデーションのプレビューとコード確認ができます。"
canonical_url: "https://web-toolbox.dev/tools/css-gradient-generator"
meta:
  author: K
  "og:description": "linear-gradient と radial-gradient のCSSコードを生成できるツールです。色、角度、位置を調整しながら、背景グラデーションのプレビューとコード確認ができます。"
  "og:image": "https://web-toolbox.dev/og/ja/tools/css-gradient-generator-696f9557.png"
  "og:image:alt": CSSグラデーションジェネレーター
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "CSSグラデーションジェネレーター - グラデーションのCSSコードを作成"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

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

CSSグラデーションを調整してコード生成

## **グラデーション設定**

角度

**カラーストップ **4 / 8

position 1

%

position 2

%

position 3

%

position 4

%

## **プレビュー**

**CSSコード**

```
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 33%, #48dbfb 66%, #1dd1a1 100%);
```

## CSSグラデーションジェネレーターとは？

`**linear-gradient**` と `**radial-gradient**` の CSS を作成し、背景グラデーションをプレビューしながら確認できるツールです。色、角度、形状、カラーストップの位置を調整すると、対応する `**background**` コードがその場で更新されます。

ヒーローセクション、カード背景、バナー、ボタン背景などのグラデーションを試したいときに便利です。

## 使い方

1. グラデーションタイプを線形または放射状から選びます。
2. 色を追加・削除しながら、各カラーストップの位置を調整します。
3. 線形なら角度、放射状なら形状を設定します。
4. プレビューで見た目を確認します。
5. 生成された `**background: ...;**` をコピーして使います。

カラーストップは最大 8 色まで追加でき、「均等ポジション」で一度きれいに並べてから微調整することもできます。

## 主な設定項目

### グラデーションタイプ

線形と放射状を切り替えられます。線形では角度、放射状では `**circle**` と `**ellipse**` を使い分けます。

### 角度

線形グラデーションで使う設定です。0〜360 度を指定でき、よく使う角度はボタンからすばやく選べます。

### カラーストップ

各色の位置を 0〜100% で調整できます。複数色を使うときに、どの位置からどの色へ切り替わるかを細かく制御できます。

## 入出力例

たとえば、線形グラデーションで角度を `**135deg**`、色を 4 点設定すると、出力は次のようになります。

```css
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 33%, #48dbfb 66%, #1dd1a1 100%);
```

放射状を選んだ場合は、次のような形式になります。

```css
background: radial-gradient(circle, #ff6b6b 0%, #feca57 33%, #48dbfb 66%, #1dd1a1 100%);
```

## 線形と放射状の使い分け

### 線形グラデーション

一定方向へ色を流したい背景に向いています。見出し背景やヒーローエリア、ボタンなどで使いやすい形式です。

### 放射状グラデーション

中心から広がる表現を作りたいときに向いています。スポットライトのような印象や、背景のアクセントを作りたいときに使いやすくなります。

## 活用シーン

- Web ページの背景グラデーションを作りたいとき
- ボタンやカードの背景を単色から変えたいとき
- バナーやヒーローエリアの印象を強めたいとき
- 色の切り替わり位置を見ながら CSS を調整したいとき

## 使うときの注意点

- 色数が多すぎると、背景としては情報量が強くなりすぎることがあります
- 文字を重ねる場合は、可読性が落ちないか別途確認するのが安全です
- 生成されるのは `**background**` 用のコードなので、背景サイズや位置の指定が必要なら別途追加します

**使ってみてどうでしたか？**

最終更新: 2025年11月20日

### **関連ツール**

- [<h4>**Border Radiusジェネレーター**</h4>](https://web-toolbox.dev/tools/border-radius-generator)
- [<h4>**Box Shadowジェネレーター**</h4>](https://web-toolbox.dev/tools/box-shadow-generator)
- [<h4>**CSS背景パターンジェネレーター**</h4>](https://web-toolbox.dev/tools/css-background-pattern-generator)
- [<h4>**CSSフィルタージェネレーター**</h4>](https://web-toolbox.dev/tools/css-filter-generator)
- [<h4>**グラデーションテキストジェネレーター**</h4>](https://web-toolbox.dev/tools/gradient-text-generator)
- [<h4>**Squircleジェネレーター**</h4>](https://web-toolbox.dev/tools/squircle-generator)
- [<h4>**CSSカーソルビューワー**</h4>](https://web-toolbox.dev/tools/css-cursor-viewer)
- [<h4>**SVG to CSS変換**</h4>](https://web-toolbox.dev/tools/svg-to-css)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/css-gradient-generator#webpage","@type":"WebPage","description":"linear-gradient と radial-gradient のCSSコードを生成できるツールです。色、角度、位置を調整しながら、背景グラデーションのプレビューとコード確認ができます。","name":"CSSグラデーションジェネレーター - グラデーションのCSSコードを作成","url":"https://web-toolbox.dev/tools/css-gradient-generator","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/css-gradient-generator"]}]},{"@id":"https://web-toolbox.dev/tools/css-gradient-generator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"linear-gradient と radial-gradient のCSSコードを生成できるツールです。色、角度、位置を調整しながら、背景グラデーションのプレビューとコード確認ができます。","name":"CSSグラデーションジェネレーター - グラデーションのCSSコードを作成","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.