Gradient builder
Preview a two-color gradient and copy the CSS.
Your saved tools stay in this browser.
Gradient builder — workspace
Loading your tool…
How to use: Gradient builder
Start with the example, or replace it with your own values.
Review Color, Second color, Angle (degrees), then select “Get result”.
Read the result, then copy or download it. Edit any input to try again.
What you can do
- Preview a two-color gradient and copy the CSS.
What you get
- A result you can review and copy, with a .css download.
What you need
- Color
- Choose a color or enter a six-digit hexadecimal color.
- Second color
- Choose a color or enter a six-digit hexadecimal color.
- Angle (degrees)
- Enter a number (0–360).
Try an example
- Color
#6550c8
- Second color
#36c7a1
- Angle (degrees)
135
Good to know
- Use a current browser with JavaScript enabled. Available formats and speed depend on your browser, device and input size.
Your work stays on your device
Your files and entered values are processed in your browser and are not uploaded for processing. The website and any required processing engines still download from the site.
Questions & answers
Is Gradient builder free?
Yes. Gradient builder is free to use and does not require an account.
Are my files or entered values uploaded?
Your files and entered values are processed in your browser and are not uploaded for processing. The website and any required processing engines still download from the site.
What result can I save?
A result you can review and copy, with a .css download.
What should I check before using the result?
Use a current browser with JavaScript enabled. Available formats and speed depend on your browser, device and input size.