Color Gradient Generator
Create CSS linear gradients with custom colors and directions.
The Color Gradient Generator builds CSS linear-gradient declarations from two or more colors. Choose a direction and copy the ready-to-use style value.
Direction
1
2
How to use
- Add or remove gradient colors.
- Choose a direction such as to right or 45deg.
- Copy the generated CSS value.
Frequently asked questions
How many colors can I use?
Between 2 and 6 colors are supported.
Can the colors be shared?
Yes, colors and direction are stored in query parameters.
Related tools
Color Palette Generator
Create harmonious color palettes with random, analogous, complementary and triadic modes.
Color Converter
Convert colors between HEX, RGB, HSL and HSV instantly.
Color Contrast Checker
Check WCAG contrast ratios for accessible text and UI.
Color Blindness Simulator
Preview how images look for common types of color blindness.
JSON Formatter
Format, validate and minify JSON in one place.
XML Formatter
Pretty-print and indent XML documents.