01
When this tool is useful
Use this to make a two-color web background or card accent. Choose start and end colors, a linear or radial type, and an angle to receive both a preview and CSS.
Gradient generator
Generate linear-gradient or radial-gradient code with a live preview.
Gradient generator
A browser-side result for planning and reference.
What to check before using it
02
How the result is produced
Linear mode creates a linear-gradient with the entered angle; radial mode creates a circular radial-gradient. The browser renders the intermediate colors between the two stops.
03
Worked example and interpretation
Set #3366FF to #FF6655 at 90 degrees for a left-to-right background declaration. Copy it into the real component and recheck the contrast of any text placed above it.
04
Scope and limitations
The generator uses two color stops and cannot remove browser color-interpolation differences. Add complex stops, alpha transitions, or wide-gamut colors in a full editor.
Frequently asked questions
How do I move a color from Gradient generator into another app?
Use the copy button below the result to copy CSS, HEX, or HSL text. Confirm that the destination app interprets the same color format.
Will a screen color from Gradient generator match print?
Not automatically. Emissive RGB screens and reflective paper and ink use different gamuts and mixing models, so print profiles and proofs are still needed.
Can I approve a design token from Gradient generator alone?
Use it as a candidate, then test the real background, dark mode, interaction states, and text contrast before naming and approving a token.