justyourpaletteCSS Gradient Generator
Blend colors into a gradient and copy the CSS.
- 100% Free
- No Sign Up
- Works in Your Browser
Gradient generator
Build CSS linear and radial gradients
More Color Tools
View all tools- Palette generatorGenerate color palettes and lock the ones you like
- Random color generatorGet a random color with its hex, RGB and HSL codes
- Palette from imageExtract a color palette from any photo
- Color pickerPick a color and copy it as hex, RGB or HSL
- Contrast checkerCheck text and background contrast against WCAG
- Hex to RGBConvert hex color codes to RGB values
- Image color pickerClick any pixel in a photo to get its color code
- Tailwind color generatorMake a 50-950 Tailwind color scale from one color
- Color wheelFind color harmonies on an interactive wheel
Every everyday color tool, right in your browser.
No software. No uploads. No signup.
Browse all 28 tools- Color tools
- 28
- Named colors
- 139
- Curated palettes
- 216
How to use the gradient generator
Three steps, all in your browser.
- 1
Start generating
Get a fresh set of colors, or start from a color you already have.
- 2
Tweak and lock
Adjust any color, lock the ones you like and generate again.
- 3
Copy the codes
Copy any color code in one click, or share the page link.
CSS Gradient Generator: what to know
The gradient generator builds CSS gradients from two or more colors. Pick a linear or radial gradient, set the angle and the position of each color stop, and see the result live. The CSS code updates as you go and can be pasted straight into a background property.
Gradients between distant hues can turn gray in the middle, because browsers blend in sRGB by default and the straight line between, say, blue and yellow passes through gray. Modern CSS can interpolate in other color spaces: 'linear-gradient(in oklch, ...)' keeps the middle colorful by traveling around the hue wheel instead.
Smooth gradients also need enough contrast with any text on top of them. Check text against both the lightest and the darkest part of the gradient, not just one end.
Popular uses
- Hero and banner backgrounds for websites
- Buttons, cards and badges with a subtle depth
- Social media graphics and presentation slides
- Overlay gradients that make text readable over photos
Tips for the best result
- Two close hues (like pink to orange) look more natural than opposite hues.
- Add a third stop in the middle to avoid a muddy center between complementary colors.
- For text over a photo, a transparent-to-dark gradient overlay is more reliable than a shadow.
Read how JustYourPalette works, browse named colors and curated palettes, and see our privacy details. Colors you enter and images you open are processed in your browser and are never sent to our server.