BuildUtilities

CSS Gradient Generator – Free Online Tool

Create beautiful CSS linear and radial gradients with a visual color picker.

✦ FreeNo SignupInstantCSSCSS Box Shadow GuideColor Contrast & AccessibilityCSS Visual Effects Guide
135°
0%
100%
background: linear-gradient(135deg, #0bbcb7 0%, #1a1f2e 100%);

Example

Input

#667eea → #764ba2, 135°

Output

background: linear-gradient(135deg, #667eea, #764ba2);

A diagonal gradient transitioning between two purple tones.

How to Use CSS Gradient Generator

  1. 1

    Choose Colors

    Pick start and end colors using the color pickers.

  2. 2

    Set Direction

    Choose the gradient direction or angle.

  3. 3

    Copy CSS

    Copy the generated CSS background property.

Common Use Cases

  • ✦Creating hero section backgrounds
  • ✦Designing button hover states
  • ✦Building branded color transitions

Also available as

CSS Gradient Generator OnlineFree Gradient MakerCSS Gradient MakerLinear Gradient Generator

More CSS Tools

Visual CSS generators with live preview and copy-paste output.

▢ CSS Box Shadow Generator◆ CSS Mesh Gradient Generator⬚ CSS Flexbox Playground▦ CSS Grid Generator◰ CSS Border Radius Generator↔F CSS Clamp Generator
View all CSS tools
Tip Jar