CSS Gradient Generator
Create linear or radial gradients with up to 4 colors and copy the ready-to-use CSS code.
How to create a CSS gradient online
Choose the gradient type
Select linear or radial, depending on the effect you want to achieve.
Add and adjust the colors
Add up to 4 colors, change their order, and adjust the angle or position of the gradient.
Copy the CSS code
Press the copy button and paste the code directly into your stylesheet.
Frequently asked questions about the gradient generator
Gradients are a simple way to add depth and style to any web design. This tool generates the exact CSS code you need, without having to write it by hand.
What types of gradients can I create?
+
You can create linear gradients (at any angle) and radial gradients.
How many colors can I use?
+
You can combine between 2 and 4 colors in the same gradient.
Does the code work in all browsers?
+
Yes, it's generated with standard CSS syntax, compatible with all modern browsers.
Do I need to install any program?
+
No, there's no need to install anything. It works directly from your browser.
Is it free?
+
Yes, this tool is completely free.
Can I use the gradient as an image background?
+
The generated code is pure CSS; if you need an image, you can take a screenshot of the preview.
Colors
Color Converter (HEX, RGB, HSL, CMYK)
Convert any color between HEX, RGB, HSL, and CMYK instantly, with live preview and the closest color name.
Color Palette Generator
Create harmonious 5-color palettes (complementary, analogous, triadic, or monochromatic) from a base color.
WCAG Contrast Checker
Check if your text and background color combination meets AA and AAA accessibility levels.
Random Color
Generate a random color with one click and discover its name, HEX/RGB/HSL codes, and similar colors.
Color Picker (eyedropper)
Pick any color from your screen using the browser's eyedropper tool, or use the classic color picker.
Color Blindness Simulator
Upload an image and see how people with protanopia, deuteranopia, or tritanopia would perceive it.
Mesh Gradient Generator
Create backgrounds with mesh gradients (blurred color patches) and download them as PNG or copy the CSS code.
Shades and Tints Generator
Automatically generate the lightest tints and darkest shades of any color, with its HEX code.
Color Mixer
Mix two colors and discover the intermediate tones step by step, with their HEX code.
Color Wheel (Harmonies)
Choose a color on the wheel and discover its harmonious combinations: complementary, analogous, triadic, and more.
Image Palette Extractor
Upload an image and automatically extract its dominant colors into a palette, with the HEX code for each one.
Average Color of an Image
Upload an image and instantly calculate its average color, with HEX, RGB and HSL codes.
Explore colors by family
More than 469 named colors, with their HEX, RGB, HSL and CMYK codes, organized into 12 color families.
