Gradient Generator: Create CSS Linear & Radial Gradients
CSS gradient generator online: create linear and radial gradients with color stops and angles, with copy-ready CSS code.
Updated 2026-08-16
Related Tools
Color Converter: HEX, RGB, HSL, HSV, CMYK & Picker
Color Name Finder: Find Closest Named Color from HEX, RGB
Image Editor Online: Watermark, Filters & Color Adjust
WCAG Contrast Checker: Check Color Accessibility Online
Favicon Generator: Website Icon ICO/PNG/SVG Maker Online
HEIC to JPG Converter: iPhone Photos to JPG Online
Features
- Create linear gradients with customizable angle from 0 to 360 degrees for any direction
- Create radial gradients with centered circle spreading effect for smooth color transitions
- Add up to 5 color stops with individual color pickers and position sliders from 0% to 100%
- Real-time gradient preview updates instantly as you tweak colors, positions, or angle
- Generate clean CSS code ready to copy and paste directly into your stylesheets
- Reorder color stops by adjusting their position percentages for custom gradient patterns
- Remove any color stop with a single click to simplify your gradient design
- Reset to default gradient preset with one click to start fresh
- Copy the generated CSS code to clipboard with a single click for use in web projects
- Switch between linear and radial gradient types without losing your color settings
- Visual color picker for each stop makes it easy to choose exact colors
- Works entirely in the browser with no data uploaded to any server
How to Use
- 1Select a gradient type: Linear for directional gradients, Radial for circular spreads from center
- 2Adjust the angle slider (0-360) to control the direction of the linear gradient
- 3Click the color swatch of any stop to pick a new color using the visual color picker
- 4Drag the position slider of each stop left or right to adjust where the color transitions
- 5Click 'Add Stop' to insert a new color between existing stops for more complex gradients
- 6Click the X button on any stop to remove it and simplify the gradient
- 7Watch the live preview update automatically as you change any gradient parameter
- 8Click Copy CSS to copy the gradient code and paste it into your project's stylesheet
Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors. Gradients can be linear (directional) or radial (circular from center), and are created entirely in CSS without any image files. They are widely used for backgrounds, buttons, and decorative elements on websites.
What's the difference between linear and radial gradients?
Linear gradients transition colors along a straight line in a specified direction (controlled by the angle). Radial gradients transition colors outward in a circular pattern from a center point, creating a ring-like effect.
How many color stops can I add?
You can add up to 5 color stops. Each stop consists of a color and a position percentage. More stops allow for more complex and colorful gradient designs.
What does the angle control do?
The angle control (0-360 degrees) determines the direction of the linear gradient. 0deg goes from bottom to top, 90deg goes from left to right, 180deg goes from top to bottom, and 270deg goes from right to left. Any angle in between creates diagonal gradients.
How do I use the generated CSS?
Click the Copy CSS button to copy the gradient code to your clipboard. Then paste it into your CSS file or inline style. The code is a standard CSS background property that works in all modern browsers.
Can I use these gradients in production websites?
Yes. CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The generated code uses the standard syntax that has been supported for over a decade.
Can I extract a gradient from an image?
No, this tool builds gradients from color stops and does not read images. To recreate an image's look, sample its colors with an eyedropper (browser dev tools or any color picker app), then add those hex values as color stops here. The hex values paste directly into the color pickers.
Can I use the generated CSS in Tailwind or Figma?
Tailwind: yes, wrap the CSS in an arbitrary value, e.g. bg-[linear-gradient(135deg,#f00,#00f)]. Figma: CSS cannot be pasted directly; recreate the gradient with Figma's gradient tool using the same colors and stops, or use a plugin that imports CSS gradients.
What is a color stop position?
A color stop position (0-100%) determines where the color appears in the gradient. 0% is at the start, 100% is at the end. By adjusting positions, you control how quickly or gradually colors transition into each other.
How do designers use this tool?
Designers use it to quickly prototype gradient backgrounds for websites, create button gradients, design hero section backgrounds, generate social media graphics, and experiment with color combinations without writing CSS manually.
What's the best way to create a sunset gradient?
Start with two stops: dark blue (#1a1a2e) at 0% and orange (#e94560) at 100%. Add a middle stop with orange-yellow (#f5a623) at 50%. Set the angle to 180deg for a top-to-bottom sunset effect.
Can I preview the gradient before copying?
Yes, the large preview panel at the top shows the live gradient. It updates instantly as you adjust colors, positions, angle, or type. What you see is exactly what the CSS will produce.
Why doesn't the gradient show up after I paste the CSS?
The generated code is a standard background property, so check these common causes: another rule on the same element overrides background afterwards (later rules win), the gradient is set on background instead of background-image in a shorthand conflict, or the element has no size: a gradient fills its element, so an empty div with no height shows nothing. Very old browsers (IE 9 and earlier) do not support CSS gradients at all. Paste the rule into a test page to isolate the issue.
Why does my gradient generator PNG export look banded?
8-bit PNGs store only 256 levels per channel, so a wide smooth gradient (especially dark-to-light or very long ones) shows visible banding stripes. This CSS gradient generator outputs code, not images: when you rasterize the gradient to a PNG (screenshot or export), the banding comes from the PNG format itself, not from the gradient. Fixes: add a subtle noise or dithering layer, use a gradient mesh, or export at 16-bit depth where the tool supports it.
Why can't I use this gradient generator's colors in Minecraft?
Minecraft uses its own fixed palettes: banners have 16 base colors and maps only 4096 colors, so web CSS hex values will not reproduce the same gradient in-game. This gradient generator produces CSS colors for websites and graphics, not Minecraft items. For in-game gradients, use a Minecraft map-art palette tool and sample its colors instead.