CSS Gradient ジェネレーター
「CSS Gradient ジェネレーター」はコード、データと QRに使えるブラウザツールです。入力内容と結果は通常この端末内で処理され、登録は必要ありません。
使い方
使い方
- Choose a linear or radial gradient.
- Adjust each color and its 0–100% position, then add stops when needed.
- Inspect the live preview and copy the CSS background declaration.
Ordered color stops
Stops are sorted from 0% through 100% every time you adjust a position. If two stops share a position, their current order is retained, which creates a deliberate hard edge between their colors.
Linear and radial controls
Linear gradients use a degree angle. Radial gradients use a circle or ellipse shape. The generated CSS uses ordinary linear-gradient() and radial-gradient() functions supported by modern browsers.
Preview locally, then copy
The preview uses your browser’s CSS renderer and updates as you change a control. No color or CSS value leaves the page. Use two stops for a simple blend or up to six for a more layered background.
よくある質問
あわせて知りたいこと
Why did a color stop move?
The editor sorts stops by their percentage so the generated CSS is easy to read. Stops with equal positions keep their current order.
How can I create a sharp transition?
Give two neighboring colors the same position. CSS switches directly from the first color to the next at that point.
What does the linear angle mean?
0deg points upward, 90deg points right, 180deg points down, and 270deg points left.
Does the tool upload colors or CSS?
No. It creates the preview and copied declaration locally in your browser.