KO

CSS Gradient Generator

Build linear or radial gradients with live preview and copy-paste CSS.

background: linear-gradient(135deg, #7c5cff 0%, #14b8a6 100%);

Linear and radial gradients

Pick two or three color stops, set an angle (linear) or shape (radial), and copy the background CSS.

Tips

  • Linear: 90deg = top to bottom; 0deg = left to right
  • Radial: circle at center is the most common card/button style
  • Test contrast if text sits on top of the gradient

For solid palettes and harmony colors, try the Color Palette tool.

Related Tools

Color Palette Generator

Create harmonious color combinations and copy HEX, RGB values.

SVG Image Converter

Convert vector SVG files into high-resolution PNG or JPG bitmap images locally.

CSS Box-Shadow Generator

Adjust blur, spread, offset, and color with sliders — copy ready-to-use CSS.