GRDCSS Gradient Generator

CSS Gradient Complete Guide

CSS gradients create smooth transitions between two or more colors using pure CSS — no image files required. They are GPU-rendered, generate zero network requests, and weigh nothing. This tool lets you adjust colors and angles in real time to preview the result, then copy the CSS instantly.

Gradient Types — linear, radial, conic

linear-gradient — Straight Lines

The most common type. Colors transition along a straight line defined by an angle or direction keyword.

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

/* Direction keywords */
background: linear-gradient(to right, #f093fb, #f5576c);
background: linear-gradient(to bottom right, #4facfe, #00f2fe);

/* Three-color gradient */
background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77);

radial-gradient — Circular

Colors radiate outward from a center point. Great for point-light effects and glowing buttons.

/* Basic circle */
background: radial-gradient(circle, #667eea, #764ba2);

/* Custom center */
background: radial-gradient(circle at top left, #a18cd1, #fbc2eb);

/* Ellipse */
background: radial-gradient(ellipse at center, #e0c3fc, #8ec5fc);

conic-gradient — Cone / Pie

Colors rotate around a center point. Used for pie charts, color wheels, and loading spinners.

/* Pie chart */
background: conic-gradient(red 0% 25%, blue 25% 50%, green 50% 75%, yellow 75%);

/* Color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

Understanding Angles, Directions, and Color Stops

Angle Reference

0deg points upward, 90deg points right, 180deg points down. Angles increase clockwise. to right equals 90deg; to bottom equals 180deg.

Color Stops

/* Percentage positions */
background: linear-gradient(90deg, #ff6b6b 0%, #ffd93d 50%, #6bcb77 100%);

/* Hard stop (no blend) */
background: linear-gradient(90deg, red 50%, blue 50%);

/* Transparency overlay */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);

Real-World Design Trend Examples

Glassmorphism

.glass-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

Mesh Gradient

.mesh-bg {
  background-color: #e8c5e5;
  background-image:
    radial-gradient(at 40% 20%, #ffd6ff 0px, transparent 50%),
    radial-gradient(at 80% 0%, #c8b6ff 0px, transparent 50%),
    radial-gradient(at 0% 50%, #ffd6ff 0px, transparent 50%),
    radial-gradient(at 80% 50%, #bde0fe 0px, transparent 50%);
}

Using with CSS Variables

:root {
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-warm: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-cool: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.btn-primary { background: var(--gradient-primary); }
.btn-warm    { background: var(--gradient-warm); }
.btn-cool    { background: var(--gradient-cool); }

Frequently Asked Questions

Can I apply a gradient to text?

.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Can I animate a gradient?

Gradients themselves are not animatable with transition/animation. Instead, animate background-position on a oversized gradient, or register a custom property with @property to animate color values directly.

What is repeating-linear-gradient?

repeating-linear-gradient tiles its pattern infinitely. Use it for stripes, checkerboards, and other repeating background patterns.

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #f0f0f0,
  #f0f0f0 10px,
  #ffffff 10px,
  #ffffff 20px
);

What is browser support like?

linear/radial-gradient: IE10+ and all modern browsers. conic-gradient: Chrome 69+, Safari 12.1+, Firefox 83+ — no IE support.