About the CSS Gradient Maker
CSS gradients are one of the most powerful and underused tools in web design. Instead of loading a gradient as an image file, a CSS gradient is rendered by the browser at any resolution with zero download cost. This makes them perfect for hero backgrounds, card overlays, button fills, and decorative elements. The CSS gradient specification supports linear gradients (directional color transitions), radial gradients (circular), conic gradients (pie-chart style), and repeating variants of all three.
This tool focuses on the two most widely used types: linear-gradient() and radial-gradient(). You can add unlimited color stops at any percentage position along the gradient, set the angle or shape, and instantly preview the result. The output is production-ready CSS with browser-standard syntax supported in all modern browsers without any vendor prefixes.
Professional designers use gradients to add depth, guide the eye, create visual hierarchy, and give interfaces a modern, polished feel. The six quick presets are inspired by popular gradient styles used in contemporary web and app design.
Frequently Asked Questions
What is the CSS gradient syntax? +
The basic syntax for a linear gradient is: background: linear-gradient(angle, color1 stop1%, color2 stop2%); For example: background: linear-gradient(135deg, #e07a5f 0%, #f4a261 100%); The angle controls direction (0deg = upward, 90deg = rightward, 180deg = downward, 135deg = diagonal). A radial gradient uses: background: radial-gradient(shape, color1 stop%, color2 stop%); This tool generates the correct syntax automatically — just copy and paste.
What is the difference between linear and radial gradients? +
A linear gradient transitions colors in a straight line along a specified angle. It's the most common type, ideal for backgrounds, buttons, and overlays. A radial gradient transitions outward from a central point in a circular or elliptical shape, creating a spotlight or halo effect. Linear gradients feel more modern and minimal; radial gradients feel warmer and more organic. Choose based on the visual mood you want to convey.
How do I add a gradient overlay on a background image? +
Use multiple background values in CSS, separated by commas — gradients layer on top of images in the order listed. For example: background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 100%), url('photo.jpg') center/cover; This creates a dark overlay that fades in from the bottom, making white text readable over any photo. The gradient sits above the image because it's listed first.
How do I create a transparent gradient in CSS? +
Use the rgba() color function or the keyword "transparent" for a color stop. Example: background: linear-gradient(to bottom, #e07a5f 0%, transparent 100%); This creates a gradient that fades from your brand color to fully transparent. The keyword "transparent" is equivalent to rgba(0,0,0,0) in most browsers, but note that browsers may interpolate through a "transparent black" which causes a grey muddy edge — use rgba(r,g,b,0) with the same base color instead to avoid this.
How do I apply a gradient to text in CSS? +
To apply a gradient to text: set background to your gradient, then add -webkit-background-clip: text; background-clip: text; and color: transparent; This clips the background to the text shape, making the gradient visible through the letterforms. Example: .gradient-text { background: linear-gradient(90deg, #e07a5f, #f4a261); -webkit-background-clip: text; background-clip: text; color: transparent; } This technique works in all modern browsers without a polyfill.
What angle creates a diagonal gradient? +
45deg creates a bottom-left to top-right diagonal, and 135deg creates a top-left to bottom-right diagonal. You can also use named directions: "to bottom right" is equivalent to ~135deg and automatically adjusts to the element's aspect ratio. For most UI designs, 135deg or 45deg angles look the most natural because they align with the natural top-left lighting convention in Western design. Non-standard angles like 110deg or 160deg can create more unique, distinctive appearances.
Do CSS gradients work in all browsers? +
Yes — linear-gradient() and radial-gradient() have been supported in all major browsers since 2012. The output from this tool uses the standard W3C syntax without any -webkit- or -moz- vendor prefixes, which are no longer needed for modern browsers. If you need to support very old browsers (IE 10–11), you may need to add a prefixed fallback, but this is extremely rare for current projects.
Can I animate a CSS gradient? +
Direct CSS animation of gradient color stops is not widely supported yet (it's in the CSS Houdini roadmap). The common workaround is to animate the background-position on an oversized gradient background — set background-size to 200% 200%, create a multi-stop gradient, then keyframe-animate background-position from 0% 0% to 100% 100%. This creates a flowing color-shift effect. Alternatively, use CSS custom properties with @property to animate gradient values natively in Chromium browsers.
