How to Use the CSS Gradient Generator

Using CSSPainter's gradient tool is straightforward. Start by selecting your gradient type — Linear, Radial or Conic — using the toggle buttons in the left panel. For linear gradients, use the Angle slider to rotate the direction from 0° to 360°. Each color stop row shows a color swatch and a position slider; drag the position slider to move that stop along the gradient axis, and click the color swatch to open the native color picker.

Click Add Stop to insert up to six color stops, or click the ✕ button on any stop row to remove it (minimum two stops are required). The preview box in the center updates in real time as you make changes. When you are satisfied with the result, click Copy Value to copy just the gradient value, or Copy Full Rule to copy the complete background property declaration.

What is a CSS Gradient?

A CSS gradient is a smooth color transition defined entirely in code — no image file required. Gradients are rendered by the browser engine, which means they scale infinitely without losing quality, load faster than bitmap images, and can be animated or changed dynamically with JavaScript. They are defined using CSS functions like linear-gradient(), radial-gradient() or conic-gradient() and applied to any element's background property.

Because gradients are part of the <image> data type in CSS, they can be used anywhere an image is accepted: as a background, as a list-style-image, as a border-image, and more. They can also be layered — stacking multiple gradient definitions separated by commas to create complex multi-tone effects.

Linear vs Radial vs Conic Gradients

Linear gradients transition colors along a straight line defined by an angle (e.g. 135deg) or a direction keyword (to right, to bottom left). They are the most common type and ideal for background fills, button overlays, and directional color accents.

Radial gradients radiate outward from a center point in a circular or elliptical shape. The default shape is circle, and you can control the size with keywords like closest-side or farthest-corner. Radial gradients are excellent for spotlight effects, vignettes, and color halos behind elements.

Conic gradients, introduced in modern browsers, sweep color stops around a central point like the face of a clock. They're ideal for pie charts, color wheels, and distinctive geometric backgrounds.

Color Stops Explained

A color stop is a point in the gradient where a specific color appears. The browser interpolates (blends) between adjacent stops. You can position stops using percentages (50%), lengths (200px), or leave them unpositioned and let the browser distribute them evenly. Placing two stops at the same position creates a hard color break with no transition.

Advanced techniques include using transparent as a stop color to fade to nothing, adding a third stop at the same position as the second to hold a color for a section, and using color-hint values to control the midpoint of the blend between two stops.

Browser Support

All three gradient types enjoy excellent cross-browser support. linear-gradient() and radial-gradient() are supported in every modern browser and have been for many years. conic-gradient() has been supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. For projects that still need to support older browsers, a flat background color fallback placed before the gradient declaration ensures the element remains visible.

Performance Tips

CSS gradients are hardware-accelerated in all major browsers when applied to elements that are composited on the GPU — typically those with transform, will-change: transform, or opacity animations. For static backgrounds they are extremely cheap to render. Avoid animating gradients directly (e.g. changing stop colors on every frame), as this forces the browser to repaint the gradient on the CPU. Instead, animate the position of a gradient layer using background-position on an oversized background, or use a CSS custom property tweak sparingly.

Practical Examples

Hero Section Background

A full-page diagonal gradient from deep purple to pink creates a modern, eye-catching hero background:

body {
  background: linear-gradient(135deg, #6c63ff 0%, #ff6b9d 100%);
  min-height: 100vh;
}

Button Gradient Fill

A subtle gradient on a CTA button adds depth without distraction:

.btn-primary {
  background: linear-gradient(90deg, #6c63ff, #5a52e0);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
}

Card Overlay

Fading a semi-transparent gradient over an image ensures text remains readable:

.card-image {
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%),
              url('image.jpg') center/cover;
}

Animated Background

By shifting the background-position over a gradient that is larger than the element, you can achieve a smooth animated flow without repainting:

.animated-bg {
  background: linear-gradient(270deg, #6c63ff, #ff6b9d, #00d4aa);
  background-size: 400% 400%;
  animation: gradientFlow 8s ease infinite;
}
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}