Free Online CSS Gradient Generator
Build linear and radial CSS gradients with a visual editor
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Try these next
Why use CSS Gradient Generator
- Visual sliders and pickers beat writing gradient syntax from memory.
- Up to five color stops with adjustable positions for complex multi-step gradients.
- Presets give you a polished starting point in seconds.
- Live preview matches the copied code pixel-for-pixel.
- Outputs standard CSS compatible with every browser since 2014.
- Linear and radial modes in one tool.
How it works
The tool interpolates user-controlled values into standard CSS gradient syntax. For linear: linear-gradient(Xdeg, color1 pos1%, color2 pos2%, ...). For radial: radial-gradient(shape at center, color1 pos1%, ...). Each color stop is stored as a hex value paired with a percentage. React state updates on every slider or picker change, rebuilding the CSS string and applying it to the preview element's inline style. Color pickers use the native <input type="color"> and return hex values inserted directly into the function.
About this tool
Writing background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) from memory is doable. Getting a five-stop radial gradient right without a preview is not. Pick linear or radial. For linear, drag an angle slider from 0 to 360 degrees. For radial, toggle between circle and ellipse. Add up to five color stops, drag position sliders to place each transition, and watch the live preview update on every change. The CSS output matches the preview pixel-for-pixel because both read from the same state. Standard property syntax, no vendor prefixes needed since 2014. Four presets -- Sunset, Ocean, Mint, Purple Haze -- give you a polished starting point. Swap the colors, tweak positions, and you have a production-ready gradient in under a minute. Hero sections, CTA buttons, card backgrounds, and text gradient effects (background-clip: text) are the most common uses.
How to use CSS Gradient Generator
- Pick gradient type. Linear for directional washes, Radial for circular spotlights. The preview updates immediately.
- Set color stops. Click a swatch to pick a color. Drag the position slider to control where the transition happens -- push a stop to 80% to hold one color longer before the fade.
- Adjust angle or shape. For linear: drag 0-360 degrees (try 135 for a diagonal). For radial: toggle circle or ellipse.
- Add or remove stops. Click Add Color Stop for three, four, or five colors. Remove any stop to simplify.
- Copy the CSS. Click Copy and paste the output into your stylesheet. Standard background property, no prefixes.
Use cases
- Building a SaaS hero section -- start with the diagonal preset, swap in brand colors, copy the CSS.
- Creating a dark-to-transparent radial vignette behind a profile photo in a mobile app mockup.
- Adding a three-color header gradient to a WordPress theme without writing the syntax from memory.
- Designing a CTA button gradient that transitions through brand primary and secondary colors.
- Creating a text gradient effect for a landing page headline using background-clip: text.
- Experimenting with radial spotlight backgrounds for a pricing card.
Frequently Asked Questions
background: linear-gradient(angle, color-stop1 position1, color-stop2 position2). The angle is measured clockwise from vertical: 0deg is bottom-to-top, 90deg left-to-right, 180deg top-to-bottom. Any CSS color value works for stops.
Linear transitions colors along a straight line at a set angle. Radial transitions outward from a central point in a circle or ellipse. Use linear for background washes and button fills; radial for spotlight effects and vignettes.
The CSS specification supports an unlimited number of color stops. In practice, 2-5 stops produce clean, visually appealing results. More than 5 stops can look muddy unless the colors are carefully chosen. This tool supports up to 5 stops, which covers the vast majority of real-world design use cases.
No. CSS gradients have been supported without vendor prefixes in all modern browsers since 2014. The -webkit- prefix was required for Chrome and Safari before version 26, but no current browser version needs it. If you need to support very old browsers (pre-2014), add a -webkit-prefixed version as a fallback line before the standard property.
Yes, using the background-clip technique: set background to your gradient, then add background-clip: text and -webkit-background-clip: text (for Safari), and set color: transparent. This clips the gradient to the text shape. Currently the -webkit- prefix is still required for Safari support, even though Chrome and Firefox support the unprefixed property.
Use rgba() or hsla() color values with an alpha of 0 for the transparent end. For example: background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%) creates a gradient from 80% opaque black to fully transparent. This technique is common for overlays on hero images where you want text readable at the top but the photo visible at the bottom.
Yes. Apply the gradient as a background, then clip it to the text shape with background-clip: text and -webkit-background-clip: text (required for Safari), and set color: transparent. The -webkit- prefix is still necessary for Safari even though Chrome and Firefox support the unprefixed version. This works on any element with visible text content.
Use repeating-linear-gradient() instead of linear-gradient(). Define a short gradient pattern with explicit stop positions and the browser tiles it across the element. For example: background: repeating-linear-gradient(45deg, #f06 0px, #f06 10px, #fff 10px, #fff 20px) creates diagonal candy-stripe stripes. This is useful for progress indicators, borders, and decorative backgrounds.
Related Tools
Discover more free utilities to enhance your productivity.