跳转到正文
▨

Gradient Generator

CSSグラデーションを視覚的に作成。

  • #6366f10%
  • #a855f7100%
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);

In CSS, 0deg points upward and 90deg points right. Stops are emitted in position order.

关于Gradient Generator

CSS gradient generators design smooth color transitions for backgrounds and buttons using stops, angles, and radial centers. toco.tools previews linear and radial gradients and outputs copy-ready CSS locally. Very old browsers may lack modern syntax; validate against your supported browser list.

使用方法

  1. Pick linear or radial
  2. Adjust colors and angle
  3. Copy the CSS snippet

常见问题

What is a CSS gradient generator?

A visual tool that builds linear or radial-gradient CSS.

Are settings sent externally?

No. All processing runs in your browser.

Linear vs radial?

Linear fades along a line; radial spreads outward from a center point.