Design & Colour
Gradient Generator
Pick two hex colours and an angle to copy a CSS linear-gradient() value.
Generate a CSS linear gradient
A two-colour CSS linear gradient is an angle plus two colour stops. Pick or paste hex values, set degrees (0 points up in CSS, increasing clockwise), and copy the generated linear-gradient() string into a stylesheet or design token. The live swatch previews the wash so you can judge contrast before committing. Multi-stop, radial and conic gradients need hand-edited CSS beyond this helper. Explore single-colour ramps with colour shade and check text contrast with contrast checker.
Worked example
135deg from #2A6F97 to #E9C46A → linear-gradient(135deg, #2A6F97, #E9C46A).
Limits and assumptions
Exactly two stops. Does not output separate -webkit- prefixes or design-tool gradient meshes.
Frequently asked questions
What does CSS mean here?
CSS means Cascading Style Sheets — the language browsers use to style pages. A linear-gradient() value is a CSS image you can set as a background.
Which way is 0 degrees?
In modern CSS, 0deg points upward; 90deg points to the right.
Can I use colour names instead of hex?
Paste hex for reliable parsing here; you can edit the copied string to named colours afterward if you prefer.
How do I add a midpoint?
Insert another colour stop manually in the CSS, for example 50% between the two ends.