🌈 CSS Gradient Maker — Build Gradients Visually

Complete Guide: CSS Gradient Generator

CSS gradients let you create smooth transitions between two or more colors without using image files. Because gradients are generated by the browser at render time, they are resolution-independent, load instantly, and never cause an extra HTTP request. This guide covers every gradient type in the CSS specification and shows you how to use them effectively in production.

The Three Gradient Types

CSS offers three core gradient functions, each suited to different design scenarios.

• linear-gradient() — Colors flow in a straight line along an axis.
• radial-gradient() — Colors radiate outward from a central point in an ellipse or circle.
• conic-gradient() — Colors sweep around a center point like a color wheel or pie chart.

Linear Gradients and Angle Syntax

The first argument of linear-gradient() is the direction. Angles follow a clockwise convention starting from the bottom: 0deg means bottom-to-top, while 180deg means top-to-bottom. The to keyword syntax is often clearer:

/* 0deg = bottom to top */
background: linear-gradient(0deg, #1a1a2e, #e94560);

/* 180deg = top to bottom */
background: linear-gradient(180deg, #e94560, #1a1a2e);

/* diagonal */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Color stops can be placed at explicit percentage or length positions. When you provide two stops at the same position, you create a hard stop — a sharp edge with no blending, perfect for stripe effects:

/* Diagonal stripes using hard stops */
background: linear-gradient(
  45deg,
  #f5a623 0%, #f5a623 25%,
  #ffffff 25%, #ffffff 50%,
  #f5a623 50%, #f5a623 75%,
  #ffffff 75%, #ffffff 100%
);
background-size: 40px 40px;

Radial Gradients

Radial gradients accept a shape (circle or ellipse), a size keyword, and a position:

background: radial-gradient(circle at 30% 40%, #ff6b6b, #4ecdc4, #1a1a2e);

Size keywords include closest-side, farthest-side, closest-corner, and farthest-corner (the default). These control where the gradient's last color stop reaches.

Conic Gradients

Conic gradients are perfect for pie charts, color wheels, and spinning loader animations:

/* Pie chart: 40% blue, 35% red, 25% green */
background: conic-gradient(
  #4285f4 0deg 144deg,
  #ea4335 144deg 270deg,
  #34a853 270deg 360deg
);

Repeating Gradients

All three types have a repeating- variant that tiles the gradient pattern indefinitely. The tile size is determined by the last explicit color stop position:

/* Repeating diagonal candy-cane stripes */
background: repeating-linear-gradient(
  45deg,
  #e63946,
  #e63946 10px,
  #f1faee 10px,
  #f1faee 20px
);

Mesh Gradients with Multiple Backgrounds

CSS does not have a native mesh gradient function, but you can layer multiple radial-gradient() layers separated by commas to produce a similar organic, multi-directional effect:

background:
  radial-gradient(ellipse at 20% 20%, rgba(255,100,100,0.6) 0%, transparent 50%),
  radial-gradient(ellipse at 80% 80%, rgba(100,100,255,0.6) 0%, transparent 50%),
  radial-gradient(ellipse at 50% 50%, rgba(100,255,150,0.4) 0%, transparent 60%),
  #0f0e17;

Animated Gradients with @property

Browsers cannot natively interpolate between two background gradient values, but the CSS Houdini @property rule lets you register custom properties with a type, enabling smooth gradient animation:

@property --color-1 {
  syntax: '<color>';
  initial-value: #667eea;
  inherits: false;
}

@property --color-2 {
  syntax: '<color>';
  initial-value: #764ba2;
  inherits: false;
}

.animated {
  background: linear-gradient(135deg, var(--color-1), var(--color-2));
  transition: --color-1 1s, --color-2 1s;
}

.animated:hover {
  --color-1: #f093fb;
  --color-2: #f5576c;
}

Performance Notes

CSS gradients are painted on the CPU into a backing layer, but they do not cause repaints on window resize because the browser re-rasterizes them as needed without triggering layout. Avoid animating background-position on a gradient background — this forces continuous repaints. For animated gradients, prefer the @property approach above or animate a pseudo-element's opacity.

• Use Color Picker to find exact hex, HSL, or OKLCH values for your stops.
• Combine gradients with CSS Glassmorphism effects for frosted-glass UI panels.