CSSグラデーション生成

What is CSS Gradient Generator?

CSS Gradient Generator lets you create linear CSS gradients visually by picking colors, adjusting stops, and setting the angle. The tool outputs production-ready CSS code that you can copy directly into your stylesheet.

How to use

1. Choose the start and end colors using the color pickers.
2. Adjust the gradient angle (0° = top-to-bottom, 90° = left-to-right).
3. Preview updates in real time. Copy the CSS output with the Copy button.

Notes

• The generated CSS uses linear-gradient(), which is supported by all modern browsers.
• For radial gradients, use radial-gradient() — this tool currently generates linear gradients only.
• You can add transparency by choosing colors with alpha values in RGBA format.

FAQ

What is a linear gradient in CSS?

A linear-gradient() transitions between two or more colors along a straight line at a specified angle. It is set as a background-image or background property in CSS.

How do I set the gradient angle?

Angles in linear-gradient() are measured clockwise from the top. 0° flows downward, 90° flows to the right, 180° flows upward, and 270° flows to the left. You can also use direction keywords like to right or to bottom right.

Can I use more than two colors?

Yes. Add additional color stops in the CSS manually: linear-gradient(90deg, red, yellow, green). This tool generates two-stop gradients — add more stops in your editor as needed.