Generate CSS linear and radial gradients visually. Adjust colors, angles and stops, preview live, and copy background-image CSS code.
Use this free online CSS Gradient Generator directly in your browser. No signup required, no data leaves your device. Part of Utilier — a collection of 133+ developer utilities.
What is CSS Gradient Generator?
CSS gradients create smooth color transitions between two or more colors. This tool generates CSS gradient code (linear-gradient or radial-gradient) by letting you visually design the gradient with color pickers, angle sliders, and position controls. The output is ready-to-use CSS for background-image, background, or other properties that accept gradients.
A CSS gradient is an image generated by the browser from ordered color stops, directions, and optional sizing rules. Linear gradients progress along an axis, radial gradients expand from an origin, and repeating variants tile the pattern. Because the result is CSS rather than a bitmap, it stays sharp at every resolution and can be layered with images, masks, and backgrounds.
Linear gradients: Transitions along a straight line at a specified angle (0deg = top to bottom, 90deg = left to right, 45deg = diagonal). Add multiple color stops.
Radial gradients: Circular or elliptical color transitions radiating from a center point. Control shape (circle, ellipse) and position (center, top-left, custom).
Multiple color stops: Add unlimited colors at specific positions (%). Create complex gradients with 3, 4, or more colors.
Live preview: See the gradient rendered in real-time as you adjust colors, angles, or positions. No manual CSS editing required.
CSS code output: Generates modern CSS (linear-gradient(), radial-gradient()) and fallback background-color for older browsers.
Why use CSS gradient?
Writing gradient CSS manually is tedious and requires trial-and-error for angles, positions, and color stops. This tool makes gradient creation visual and instant.
Visual design: Use color pickers and sliders instead of typing hex codes and percentages. See results immediately.
Save time: No need to refresh the browser repeatedly to see gradient changes. Adjust in real-time and copy the final CSS.
Learn gradient syntax: See how color stops, angles, and positions translate to CSS code. Great for learning gradient syntax.
Complex gradients made easy: Multi-color gradients with custom positions are hard to code manually. The tool handles the syntax automatically.
Browser compatibility: Generates vendor prefixes (-webkit-, -moz-) automatically if needed, though modern browsers support unprefixed gradients.
Reusable code: Copy the CSS and use it in any project. Works in all modern browsers (Chrome, Firefox, Safari, Edge).
When to use CSS gradient
Use whenever you need gradient backgrounds or effects in CSS.
Creating gradient backgrounds for hero sections, headers, or cards.
Designing buttons with gradient fills (primary action buttons, call-to-action).
Adding visual interest to backgrounds instead of solid colors.
Creating subtle gradients for depth (light to dark) in UI elements.
Generating gradient overlays for images (darken bottom for readable text).
Experimenting with color schemes and transitions for branding or themes.
Learning CSS gradient syntax by seeing visual changes reflected in code.
How to use CSS gradient
Choose gradient type, set colors and positions, copy CSS.
Select gradient type: Choose Linear (straight line) or Radial (circular/elliptical). Linear is most common for backgrounds; radial is good for spotlights or focal effects.
Add colors: Click color swatches to add or change colors. Each color is a 'color stop'. Drag stops to adjust their position (%) along the gradient.
Set angle (linear) or position (radial): For linear gradients, adjust the angle (0deg = top-to-bottom, 90deg = left-to-right, 180deg = bottom-to-top). For radial, set position (center, top-left, etc.).
Adjust color stop positions: Drag color stops or enter % values to control where each color starts/ends. 0% = start, 100% = end. Multiple stops create multi-color gradients.
Preview the gradient: The gradient renders in real-time. See the result before copying CSS. Adjust until satisfied.
Copy CSS code: Click 'Copy CSS' to get the linear-gradient() or radial-gradient() code. Paste into your stylesheet or inline style.
Key features
Linear and radial gradients: Generate linear-gradient() (straight lines) and radial-gradient() (circles/ellipses).
Unlimited color stops: Add as many colors as needed. Drag stops to adjust positions (%). Create complex multi-color gradients.
Angle control (linear): Set gradient angle in degrees (0-360). Visual slider for easy adjustment.
Position control (radial): Set gradient center position: center, top, bottom, left, right, top-left, or custom %.
Live preview: Real-time rendering of gradient as you adjust colors, angles, or stops. WYSIWYG editing.
CSS code output: Generates modern CSS (linear-gradient(), radial-gradient()) ready to paste into stylesheets.
Hex, RGB, RGBA support: Choose colors in hex, RGB, or RGBA (for transparency). Alpha channel supported for translucent gradients.
Common use cases
Hero section backgrounds: Create vibrant gradient backgrounds for landing page hero sections or banners.
Transparent at top, semi-transparent black at bottom. Overlay on images to make text readable at the bottom. Common for hero sections with text over images.
Use rgba() or hsla() for transparent color stops. Example: rgba(255,0,0,0.5) 0% (50% transparent red).
Radial gradient shapes
circle (equal width/height) or ellipse (matches container aspect ratio). Default is ellipse.
Radial gradient positions
at center, at top, at bottom, at left, at right, at top left, at bottom right, at 50% 50% (custom %).
Browser support
All modern browsers (Chrome, Firefox, Safari, Edge) support unprefixed gradients. IE10+ supports -ms-linear-gradient(). IE9 and older do not support gradients.
Fallback for old browsers
Provide a solid background-color before the gradient as a fallback: background-color: #ff0000; background: linear-gradient(...);
Comparison to images
Gradients are CSS-based, scalable, and smaller than image files. Images require HTTP requests and are pixel-based. Use gradients for solid-color transitions, images for complex patterns.
Common mistakes to avoid
Using gradient as background without a fallback solid color
Why it happens: Older browsers (IE9 and earlier, very old mobile browsers) do not support CSS gradients. If you only specify background: linear-gradient(...) without a fallback, users on old browsers see no background at all — the element is transparent or uses the default white background. This breaks the design and may make text unreadable.
How to avoid it: Always provide a fallback solid color before the gradient: background-color: #ff0000; background: linear-gradient(...); Browsers that support gradients override the solid color with the gradient. Old browsers use the solid color as a fallback. Choose a fallback color that matches the gradient's dominant color.
Using too many color stops with small position differences, creating banding
Why it happens: If you add many colors with stops very close together (e.g., #f00 0%, #0f0 1%, #00f 2%, ...), the gradient transitions become abrupt and appear as distinct color bands instead of smooth transitions. This happens because browsers have limited rendering precision for gradients, especially on low-DPI screens.
How to avoid it: Use fewer color stops with larger position differences. For smooth gradients, 2-4 color stops are usually enough. If you need many colors, space them at least 10-20% apart. For rainbow gradients, distribute colors evenly (0%, 25%, 50%, 75%, 100% for 5 colors).
Applying gradients to small elements with text, making text unreadable
Why it happens: Gradients with high color contrast (light to dark) can make text hard to read if the text sits on the transition area. For example, white text on a gradient from white to black is unreadable at the white end. This is common with gradient buttons or badges where text overlaps color transitions.
How to avoid it: Use low-contrast gradients for text backgrounds (light gray to white, dark blue to darker blue). Or ensure text sits on a consistent color area (use solid color backgrounds for text, gradient for accents). For high-contrast gradients, use text shadows (text-shadow: 0 0 2px rgba(0,0,0,0.8)) to ensure readability.
Confusing angle directions in linear gradients (0deg, 90deg, 180deg)
Why it happens: CSS gradient angles are not intuitive. 0deg is from bottom to top (not left to right). 90deg is from left to right. 180deg is from top to bottom. Many developers expect 0deg to be horizontal (left-to-right) like in math/physics (0° = east), but CSS uses a different convention. This causes gradients to appear rotated incorrectly.
How to avoid it: Memorize the CSS angle convention: 0deg = bottom to top, 90deg = left to right, 180deg = top to bottom, 270deg = right to left. Or use keywords instead: to top, to right, to bottom, to left. Example: linear-gradient(to right, ...) is clearer than linear-gradient(90deg, ...).
Using gradients for performance-critical elements, causing slow rendering
Why it happens: CSS gradients are rendered by the browser and can be computationally expensive, especially radial gradients, gradients with many color stops, or gradients on large areas. On low-end devices or when used excessively (hundreds of gradient elements), they can cause jank (dropped frames) during scrolling or animations.
How to avoid it: Use gradients sparingly for hero sections, buttons, or accent elements — not for every element on the page. For performance-critical areas (lists with hundreds of items), use solid colors or cached background images instead. Test on low-end devices. For animations, animate opacity or transform instead of animating gradient colors.
Frequently asked questions
What is the difference between linear-gradient and radial-gradient?
linear-gradient creates a straight-line color transition at a specified angle (horizontal, vertical, diagonal). radial-gradient creates a circular or elliptical transition radiating from a center point. Use linear for backgrounds, buttons, headers. Use radial for spotlights, vignettes, or focal effects.
How do I create a horizontal gradient (left to right)?
Use linear-gradient(90deg, color1, color2) or linear-gradient(to right, color1, color2). 90deg or 'to right' creates a left-to-right gradient. Example: background: linear-gradient(90deg, #ff0000, #0000ff);
Can I use gradients with transparency (alpha channel)?
Yes. Use rgba() or hsla() colors with an alpha value (0 = fully transparent, 1 = fully opaque). Example: linear-gradient(90deg, rgba(255,0,0,0.5), rgba(0,0,255,1)) creates a gradient from semi-transparent red to opaque blue. Common for image overlays.
Why does my gradient look different in Safari vs Chrome?
Modern browsers render gradients identically for standard syntax. Differences usually come from old vendor prefixes (-webkit-gradient, -moz-linear-gradient) or non-standard syntax. Use the modern unprefixed syntax (linear-gradient(), radial-gradient()) for consistency. If targeting very old browsers, include vendor prefixes.
How do I create a gradient overlay on an image?
Use a transparent-to-opaque gradient over the image with background-image: linear-gradient(...), url(image.jpg);. The gradient is layered on top. Example: background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)), url('hero.jpg'); This darkens the bottom for readable text.
Can I animate CSS gradients?
Not directly. CSS transitions and animations do not support animating gradient color stops or angles (browsers cannot interpolate gradients smoothly). Workaround: animate opacity of overlapping gradient layers, or use pseudo-elements with gradients and transition opacity. For true gradient animations, use Canvas, SVG, or CSS Houdini (limited browser support).
What are common gradient angles for design?
0deg (vertical, top-to-bottom), 90deg (horizontal, left-to-right), 180deg (vertical, bottom-to-top), 45deg (diagonal), 135deg (diagonal opposite). Vertical and horizontal are most common. Diagonal gradients add energy and motion to designs.