本文へスキップ
Toolmize

グラデーション生成器

What is a Gradient Generator?

This tool lets you create color gradients visually and export ready-to-use code for multiple frameworks. Pick colors, adjust angles, and copy the code for CSS, Tailwind v3/v4, Flutter, SVG, or React.

CSSグラデーションの作成方法

Gradient Type

Choose from three gradient types using the toggle at the top:

  • Linear — Colors transition in a straight line. You control the angle (0 to 360 degrees).
  • Radial — Colors radiate outward from the center in a circle.
  • Conic — Colors rotate around a center point, like a color wheel.

Angle

For linear and conic gradients, drag the slider to set the direction (0 to 360 degrees). This controls where the gradient starts and ends.

Color Stops

Each gradient needs at least 2 color stops. You can add up to 5.

  • Use the color picker to choose a color visually or type a hex code
  • Use the position slider to set where each color starts (0% to 100%)
  • Drag the handle to reorder stops — grab the grip icon on the left
  • Click Add Color to add more stops
  • Click the X button to remove a stop (minimum 2 required)

Randomize and Clear

  • Randomize generates a new set of harmonious colors using color theory (analogous, complementary, triadic, or split-complementary relationships)
  • Clear All resets to the default two-color gradient

Output Formats

Select one or more output formats using the toggles below the preview:

FormatOutputUse case
CSSbackground: linear-gradient(...)Standard web styling
Tailwind v4className="bg-linear-..."Tailwind CSS v4 projects
Tailwind v3className="bg-gradient-to-r..."Tailwind CSS v3 projects
SVG<linearGradient> elementInline SVG, icons, illustrations
FlutterLinearGradient(colors: [...])Flutter/Dart mobile apps
Reactstyle={{ background: '...' }}React inline styles

Multiple formats can be selected at once — useful for comparing syntax across frameworks.

Sharing

Your gradient settings are saved in the URL automatically. Click Share Result at the bottom of the tool to copy the link (desktop) or open the native share menu (mobile). Anyone opening the link will see the same colors, angle, and type.

Good Examples

Example 1: Ocean Depth

A deep blue gradient for headers or hero sections.

  • Type: Linear
  • Angle: 135 degrees
  • Stop 1: #38bdf8 (sky blue) at 0%
  • Stop 2: #1e1b4b (deep indigo) at 100%

Example 2: Sunset Glow

A warm multi-color gradient with three stops.

  • Type: Linear
  • Angle: 90 degrees
  • Stop 1: #f97316 (orange) at 0%
  • Stop 2: #ec4899 (pink) at 50%
  • Stop 3: #8b5cf6 (violet) at 100%

Example 3: Radial Focus

A spotlight effect using radial gradient.

  • Type: Radial
  • Stop 1: #fbbf24 (amber) at 0%
  • Stop 2: #1e1b4b (deep indigo) at 100%

The Formula

CSS gradients use a simple syntax:

linear-gradient(angle, color1 position1, color2 position2, ...)

  • angle: Direction in degrees (0deg = up, 90deg = right, 180deg = down)
  • color: Any CSS color value (hex, rgb, hsl, named colors)
  • position: Where the color starts, as a percentage (0% to 100%)

The browser interpolates colors smoothly between each stop.

Key Tips

  • Keep it simple. Two or three colors usually look best. More colors can look muddy.
  • Use color harmony. The Randomize button generates colors based on color theory — use it for inspiration.
  • Test on both light and dark backgrounds. A gradient that looks great on white may not work on dark mode.
  • Drag to reorder. Swapping stop order can dramatically change the gradient feel.
  • Share your work. The URL updates automatically — just copy and send.

Frequently Asked Questions

What is the difference between linear and radial gradients?

Linear gradients transition colors along a straight line at a specified angle. Radial gradients transition colors outward from a center point in a circular shape. Conic gradients rotate colors around a center point like a pie chart.

Which output format should I use?

Use CSS for standard web projects. Use Tailwind v4 or v3 if your project uses Tailwind CSS. Use Flutter for Dart mobile apps. Use SVG when you need gradients inside SVG graphics. Use React for inline styles in React components (though CSS classes are generally preferred).

Can I use gradients as backgrounds for text?

Yes, using background-clip: text and -webkit-text-fill-color: transparent in CSS. This creates a gradient text effect. This requires additional CSS beyond what this generator produces.

Do gradients affect page performance?

No. CSS gradients are rendered by the browser’s compositor and have virtually zero performance impact. They are much lighter than background images.

よくある質問

このツールは無料で使用できますか？

はい、Toolmizeのすべてのツールは完全に無料です。サインアップも隠れた費用もありません。ただ開いて使うだけです。

私のデータは安全ですか？

すべての計算はブラウザ内で直接行われます。データがサーバーに送信されることはないため、あなたの情報は100%プライベートに保たれます。