CSS Gradient Generator
Create linear gradients visually and copy production-ready CSS code.
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
- Choose the start and end colors using the color pickers.
- Adjust the gradient angle (0° = top-to-bottom, 90° = left-to-right).
- 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 abackground-imageorbackgroundproperty 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 liketo rightorto 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.
Overview
Build linear CSS gradients visually by picking two colors and an angle, then copy ready-to-use CSS. Great for backgrounds, buttons, and hero sections without memorizing syntax.
How to use
- Pick the start and end colors.
- Adjust the gradient angle while watching the live preview.
- Copy the generated linear-gradient() CSS into your stylesheet.
Examples
-
Hero background
Input: Purple to blue at 135deg
Output: background: linear-gradient(135deg, #8b5cf6, #3b82f6);
-
Button accent
Input: Orange to pink at 90deg
Output: A horizontal two-stop gradient for a call-to-action button.
Notes
- This tool generates linear gradients; for radial ones write radial-gradient() manually.
- You can add more color stops by editing the generated CSS in your editor.
- Check contrast against overlaid text, especially in dark mode.
FAQ
- Can I create gradients with three or more colors?
- The tool outputs two-stop gradients. Add extra stops manually, e.g. linear-gradient(90deg, red, yellow, green).
- What does the angle mean?
- 0deg points upward and angles increase clockwise: 90deg goes left-to-right, 180deg top-to-bottom.
- Do gradients affect performance?
- CSS gradients are rendered by the browser and are generally cheaper than image files.
Embed this tool
Paste this iframe into any HTML page to embed CSS Gradient Generator on your site: