Quick answer
Use the Gradient Generator to create smooth color gradients and copy the CSS for websites, cards, backgrounds, and visual layouts. Start with two or more colors, adjust the direction, and use the result in your design.
What is a gradient generator?
A gradient generator helps you blend two colors into a smooth transition and copy the CSS for a website, card, background, poster, or social graphic. Instead of guessing a gradient by hand, you can adjust the colors, angle, and style while seeing the result immediately.
PhotoColor keeps the controls simple so the gradient still feels soft and visual, not overbuilt.
Linear vs radial gradients
A linear gradient moves from one color to another along a straight direction, such as left to right or top to bottom. A radial gradient spreads from a center point outward, creating a glow or spotlight effect.
Linear gradients are often best for page backgrounds and UI surfaces. Radial gradients are useful for subtle highlights, editorial graphics, and atmospheric cards.
How to create a CSS gradient
- Choose Linear or Radial.
- Pick two colors or type HEX values directly.
- Adjust the angle for linear gradients.
- Use a preset if you want a softer starting point.
- Copy the generated CSS and paste it into your stylesheet.
Tips for soft, modern gradients
- Start with colors that share a similar brightness or mood.
- Use gentle contrast for backgrounds that sit behind text.
- Keep strong, saturated gradients for accents rather than large reading areas.
- Try photo-derived palette colors when you want the gradient to match an image or brand mood.
Example output
A visual gradient becomes copyable CSS.
Privacy note
Gradient generation happens in your browser. The colors you enter are used only to preview and copy CSS on this page.
Related tools
FAQ
Can I copy the CSS gradient?
Yes. The generator creates a CSS background value that you can copy and paste into your stylesheet.
What is a linear gradient?
A linear gradient blends colors along a straight line, controlled by an angle or direction.
What is a radial gradient?
A radial gradient blends outward from a center point, often creating a soft glow or spotlight effect.
How many colors should a gradient use?
Two colors are enough for most clean UI gradients. More colors can work, but they are easier to overdo.
Can I create gradients from photo palettes?
Yes. Generate or pick colors from a photo, then paste those HEX values into the gradient controls.