Build CSS gradients with editable color stops
Use the gradient builder to create a linear or radial CSS gradient, adjust color stops visually, and copy the resulting CSS. It is designed for quick iteration when a static color value is not enough.
How it works
- Choose a linear or radial gradient.
- Add, move, and edit color stops until the preview matches the intended transition.
- Copy the generated CSS and test it in the component or stylesheet where it will be used.
Capabilities and limits
- Builds editable linear and radial CSS gradients.
- Provides a live preview and CSS-ready output.
- A gradient should still be tested against text and interactive states for contrast and accessibility.
Examples
Simple horizontal fade
linear-gradient(90deg, #2563eb 0%, #7c3aed 100%)A two-stop horizontal transition suitable for a decorative background.
Soft radial highlight
radial-gradient(circle at top, #22d3ee 0%, #0f172a 70%)Places a light source near the top of a dark surface.
Frequently asked questions
What is the best CSS gradient type?
Use linear gradients for directional transitions and radial gradients for a glow, spotlight, or centered effect.
Can I check text contrast over a gradient?
Check the lightest and darkest areas where text appears; a single contrast ratio cannot represent every point in a gradient.