Back
Gradient generator
Color and palettes
Loading
Loading tool
Preparing the tool. The remaining time is not yet known.
All processing for this tool happens in your browser. Your input is not sent to a server.
About this tool
Preview a two-color linear or circular radial gradient and copy its CSS.
Common uses
- Preview a two-color linear or circular radial gradient and copy its CSS.
- Enter two three- or six-digit HEX colors and choose linear or radial.
How to use it
- 1.Enter two three- or six-digit HEX colors and choose linear or radial.
- 2.For a linear gradient, set an angle from 0 to 360 degrees; copy the background declaration.
Limits and notes
- Only two color stops are generated. Radial mode uses a circle; custom stop positions, alpha and multiple stops are not available.
Frequently asked questions
What does this tool do?
Preview a two-color linear or circular radial gradient and copy its CSS.
What should I check before using the result?
Only two color stops are generated. Radial mode uses a circle; custom stop positions, alpha and multiple stops are not available.