Build linear, radial & conic gradients with live preview
CSS Gradient Generator creates linear, radial, and conic gradient CSS values through an interactive color-stop editor. Add as many color stops as needed, drag them to position, adjust opacity per stop, and choose the gradient angle or shape. The tool outputs the complete CSS background: linear-gradient(...) or background-image value ready to paste into your stylesheet, with cross-browser prefixes if needed.
CSS gradients are generated images — they can be used anywhere an image is accepted (background, background-image, border-image, mask-image). They require no server request, scale infinitely (being mathematically defined), and support transparency, multiple color stops, and hard transitions (two stops at the same position create a sharp edge instead of a gradient).
Linear gradients go from one edge to another in a direction (0deg = bottom to top, 90deg = left to right, 135deg = diagonal). Radial gradients expand from a center point in a circle or ellipse. Conic gradients sweep around a center point like a color wheel — useful for pie charts and spinner animations. Multiple gradients can be layered by separating them with commas in the background property.
Two-color fade, blue to purple at 135°
Result: background: linear-gradient(135deg, #3b82f6, #8b5cf6);
Transparent overlay for hero section
Result: background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); — dark overlay that fades in over an image
Hard transition stripe (no blend)
Result: background: linear-gradient(90deg, #ef4444 0%, #ef4444 50%, #3b82f6 50%, #3b82f6 100%); — two stops at 50% create a sharp line
What is the difference between linear, radial, and conic gradients?
Linear gradients progress in a straight line from start to end. Radial gradients expand outward from a center point as a circle or ellipse. Conic gradients sweep around a center point (like a pie chart or color wheel). All three are specified in background or background-image.
How do I create a transparent gradient?
Use rgba() or hsla() with an alpha value of 0 for the transparent stop. For example: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8)) creates a shadow overlay that fades from transparent to 80% black.
Can I layer multiple gradients?
Yes — separate multiple gradients with commas in the background property. The first gradient is on top. Example: background: linear-gradient(to right, rgba(59,130,246,0.5), transparent), url('photo.jpg') center/cover — a semi-transparent blue gradient over an image.
What are gradient hints?
Gradient hints (a single percentage between two color stops) control the midpoint of the transition. Without a hint, the midpoint is exactly between the two stops. A hint of 10% makes the transition skew toward the first color — useful for perceptually even gradients.
How do I animate a gradient?
CSS transitions cannot animate gradient values directly — gradients are images and cannot be interpolated by CSS. Workaround: animate a pseudo-element's opacity, or use CSS Houdini's @property to register a custom property as a