What types of gradients can I create?

Linear gradients flow in a straight line at any angle (0°–360°). Radial gradients radiate outward from a center point. Both support unlimited color stops with custom positions.

What does the angle control do?

The angle (in degrees) sets the direction of a linear gradient. 0° flows top to bottom, 90° flows left to right, 180° flows bottom to top, and 270° flows right to left.

How do I add more color stops?

Click the "Add stop" button to insert a new color stop at the midpoint. You can then drag the position slider to place it precisely. Up to 8 stops are supported.

Can I use transparent stops?

Yes. Pick any color and set its opacity to 0% using the rgba alpha channel. The generated CSS will use rgba() or transparent as appropriate.

What CSS property does the output use?

The output is a background value using the standard linear-gradient() or radial-gradient() CSS functions — no vendor prefixes needed for modern browsers (Chrome 26+, Firefox 16+, Safari 7+).

Can I use the gradient as a border or text fill?

Yes. For text, use the CSS -webkit-background-clip: text trick. For borders, use the border-image property. The gradient CSS code output works as the value for any property that accepts .

How do I copy the CSS?

Click the "Copy CSS" button below the preview to copy the full background: linear-gradient(…) declaration to your clipboard, ready to paste into your stylesheet.

Can I use this gradient in Figma or Sketch?

Copy the hex values and positions and enter them manually in your design tool. Most design tools do not accept CSS gradient syntax directly.

Generators /

CSS gradient generator

Build linear and radial CSS gradients visually. Add color stops, adjust angles, see a live preview, and copy the ready-to-use CSS code.

100% in your browser. No data sent anywhere.

Type

Angle: 90°

Color stops

CSS output

How to use

Choose Linear or Radial gradient type.
For linear, drag the angle slider to set the direction.
Adjust the color stops — pick colors and drag the position sliders.
Click + Add stop to insert more color transitions.
Click Copy CSS to copy the background property and paste it into your stylesheet.

Common use cases

Hero section backgrounds — linear gradient from brand primary to secondary.
Button hover states — subtle lightness shift using a short gradient.
Card overlays — transparent-to-black radial gradient for image captions.
Progress bars — colorful gradient fill indicating completion.

Also see: Color Palette Generator for harmonious base colors, Color Converter to convert between HEX, RGB, and HSL.

よくある質問

What types of gradients can I create?: Linear gradients flow in a straight line at any angle (0°–360°). Radial gradients radiate outward from a center point. Both support unlimited color stops with custom positions.
What does the angle control do?: The angle (in degrees) sets the direction of a linear gradient. 0° flows top to bottom, 90° flows left to right, 180° flows bottom to top, and 270° flows right to left.
How do I add more color stops?: Click the "Add stop" button to insert a new color stop at the midpoint. You can then drag the position slider to place it precisely. Up to 8 stops are supported.
Can I use transparent stops?: Yes. Pick any color and set its opacity to 0% using the rgba alpha channel. The generated CSS will use rgba() or transparent as appropriate.
What CSS property does the output use?: The output is a background value using the standard linear-gradient() or radial-gradient() CSS functions — no vendor prefixes needed for modern browsers (Chrome 26+, Firefox 16+, Safari 7+).
Can I use the gradient as a border or text fill?: Yes. For text, use the CSS -webkit-background-clip: text trick. For borders, use the border-image property. The gradient CSS code output works as the value for any property that accepts <image>.
How do I copy the CSS?: Click the "Copy CSS" button below the preview to copy the full background: linear-gradient(…) declaration to your clipboard, ready to paste into your stylesheet.
Can I use this gradient in Figma or Sketch?: Copy the hex values and positions and enter them manually in your design tool. Most design tools do not accept CSS gradient syntax directly.

このツールの問題を報告