Free · no signup · browser-local
Two-Color CSS Linear Gradient Generator
Choose two HEX colors and an angle to preview a linear gradient. Copy the generated CSS linear-gradient value for your page background.
Input and settings
LOCALbackground: linear-gradient(90deg, #ACCDEA 0%, #9DDA8F 100%);
Getting started
Choose two HEX colors and an angle, then copy CSS.
Before you use the result
This tool creates linear two-stop gradients only.
Try an example
Blend #ACCDEA into #9DDA8F at 90 degrees.
How it works
CSS linear-gradient controls orientation and interpolates color stops.
Frequently asked questions
Preview a two-stop linear gradient and copy CSS.
How do I use CSS Gradient Generator?
Choose two HEX colors and an angle, then copy CSS.
Does this tool upload my data?
Inputs and files are processed in your browser. Page-view analytics do not contain your tool input.
What should I check before using the result?
This tool creates linear two-stop gradients only.