CSS Gradient Generator — Linear and Radial Gradient Complete Guide
CSS gradients create smooth color transitions without image files, reducing page weight while enabling rich visual effects. linear-gradient transitions along a straight line in any direction or angle. radial-gradient radiates outward from a center point. Both are universally supported in all modern browsers and can be applied to any CSS property that accepts images — background, border-image, mask, and more.
CSS gradient syntax:
linear-gradient(direction, color1, color2, ...)
radial-gradient(shape size at position, color1, color2, ...)
Popular gradient patterns:
— Button: to right, #667eea, #764ba2 (purple blend)
— Hero: to bottom, #0f0c29, #302b63, #24243e (deep navy)
— Warm sunset: to right, #f093fb, #f5576c (pink-red)
— Card overlay: to bottom, transparent, rgba(0,0,0,0.7)
Using rgba() color values with alpha transparency allows gradient overlays on images without needing a separate element. Gradients are computed values and carry zero additional HTTP requests, making them a performance-friendly alternative to background images for simple color transitions.
Frequently Asked Questions
A: conic-gradient rotates colors around a center point (like a pie chart or color wheel). It is ideal for pie charts with CSS, loading spinners, and hue wheels. Syntax: conic-gradient(red 0deg, yellow 120deg, blue 240deg). It is supported in Chrome 69+, Firefox 83+, Safari 12.1+ but not in IE or legacy Edge.
A: CSS gradients are not directly animatable with transitions. A common workaround is to set background-size: 200% and animate background-position — this creates a moving gradient effect. Alternatively, animate the opacity of a layered pseudo-element (::before, ::after) containing the second gradient. True color interpolation between gradients requires JavaScript or Houdini CSS.
A: Use transparent as a color stop: linear-gradient(to bottom, transparent, #000). The CSS keyword transparent equals rgba(0,0,0,0). For color-to-transparent fades that avoid the "grey dead zone" in some browsers, use the rgba form of your color with zero alpha: linear-gradient(to bottom, #667eea, rgba(102,126,234,0)).