Color Tools
Gradient Generator
Build linear or radial CSS gradients with two colors and a live preview. Copy the gradient string for your stylesheets.
Loading tool…
How to use
- Choose linear or radial gradient
- Set colors and angle
- Copy the CSS gradient string
Next step
- Contrast Checker
Check foreground and background color contrast for WCAG 2.x. See the ratio plus AA/AAA pass flags for normal and large text with a live preview.
- Color Blindness Simulator
Simulate protanopia, deuteranopia, tritanopia, or achromatopsia on hex color palettes or uploaded images. Preview how designs appear to color-vision-deficient users.
- Color Picker
Pick a color with the native swatch or type HEX, RGB, and HSL values kept in sync. Copy any format or share via URL.
Frequently asked questions
What output do I get?
A ready-to-use CSS gradient value such as linear-gradient(90deg, #000, #fff).
Can I share my gradient?
Yes. Type, angle, and both colors are stored in the shareable URL.