Contrast checker
Check text contrast against WCAG AA and AAA thresholds.
Color & designCSS gradient generator
Build a two-color linear gradient and copy production-ready CSS.
Ready when you are.
◎ No uploads. Your input stays here.↗ Free to use. No account needed.⌘ / Ctrl + Enter to run
A worked example
Using the default settings. You can try the same input in the workspace.
Input / settings
Start: #6d4aff; end: #f2a48e; angle: 135°
Expected result
background: linear-gradient(135deg, #6D4AFF, #F2A48E);
A LITTLE GUIDANCE
How to use CSS gradient generator
Choose two colors and an angle. Preview the gradient, then copy the CSS declaration.
Good to know
This generator outputs a linear gradient with two color stops. Check text contrast separately wherever you use it.
A few quick answers.
How do I use the result?
Copy the background declaration into a CSS rule. The angle is in degrees and the two colors are solid HEX values. Check text contrast across the whole gradient.
Is my input sent to a server?
No. This tool processes your input in your browser. We don't store your text, files or results. Standard website access logs are separate; read our privacy notes.
Can I use it for free?
Yes. No account, subscription or usage credits are required.
How do I keep my result?
Use Copy or Download after running the tool. Inputs are not saved automatically and disappear when you leave or refresh the page.
Something not right? Report a problem with this tool. Include the steps, but never passwords or private input.