Linear Gradients Follow an Axis
A linear gradient moves along a straight line. In CSS, 0deg points up and increasing angles rotate clockwise, so 90deg points right and 180deg points down.
Free online CSS tool - no registration or login
Free CSS Gradient Generator Online
Build linear, radial, or conic gradients with two to six color stops. Preview the result live, adjust the relevant direction or origin, and copy ready-to-use CSS without signing in.
- - Linear, radial, and conic
- - Two to six color stops
- - Live browser preview
- - Copy complete CSS
Interactive CSS workbench
Build the gradient
Color stops
Two to six stops, kept in position order.
Stop 1
Enter an opaque #RGB or #RRGGBB color.
Stop 2
Enter an opaque #RGB or #RRGGBB color.
Stop 3
Enter an opaque #RGB or #RRGGBB color.
Presets
Live preview
linearCSS output
.gradient-background {
background-color: #0F766E;
background-image: linear-gradient(135deg, #0F766E 0%, #F59E0B 52%, #172033 100%);
}The preview and both copy actions use the same generated gradient value.
The editor runs in this browser tab. It does not upload colors or generated CSS, and no account is required.
- Opaque #RGB and #RRGGBB colors only; no alpha or opacity controls.
- No repeating, layered, mesh, or custom color-space gradients.
- Copies standard CSS only; no image, SVG, Tailwind, or CSS-file export.
How to Create a CSS Gradient
Move from a gradient type to ordered color stops, a real browser preview, and CSS you can paste into a stylesheet.
Common gradient tasks
- Create a restrained hero or section background
- Add a radial spotlight behind a card or illustration
- Build a conic decorative sweep around a chosen origin
- Copy a complete CSS rule with a solid-color fallback
- Step 1
Choose the gradient type
Use linear for a directional fade, radial for a center-out effect, or conic for a sweep around an origin.
- Step 2
Edit colors, stops, and direction
Enter valid HEX colors, position each stop, and adjust the angle, shape, or origin shown for the selected type.
- Step 3
Preview and copy the CSS
Review the browser-rendered surface, then copy the complete rule or only the gradient function for your stylesheet.
Choose the Right CSS Gradient Type
The three CSS gradient functions describe different paths through the same ordered color stops. Start with the geometry that matches the intended surface.
Radial Gradients Expand from an Origin
A radial gradient grows outward as a circle or ellipse. Move its origin to place a spotlight near the center, an edge, or a corner.
Conic Gradients Sweep Around a Point
A conic gradient rotates colors around an origin. It works well for decorative sweeps, but an unlabeled CSS background is not an accessible data chart.
Control Color Stops, Positions, and Direction
Color stops anchor colors at exact points. Their order and spacing determine where each transition starts, accelerates, or becomes more concentrated.
Edit the color stopsUse Two to Six Opaque HEX Colors
Type #RGB or #RRGGBB, or use the native color picker. An invalid draft does not replace the last valid color used in the preview.
Keep Stop Positions Predictable
Stops stay in ascending order from 0% to 100%. Move neighboring stops closer for a quicker transition or farther apart for a longer blend.
Use Presets as Starting Points
Every preset remains editable. Reverse the color order, generate new colors, or reset to the initial gradient without reloading the page.
Use the Generated CSS in a Real Layout
The copied rule is intentionally small: a solid fallback followed by the exact gradient value shown in the preview.
Keep a Solid Background Fallback
Place background-color before background-image so a usable solid color remains if the gradient declaration is unavailable. Review that fallback in context too.
Apply the Gradient as a Background Image
CSS gradients are image values. Use the generated function with background-image or a background shorthand, not as a background-color value.
Review Real Element Sizes
A CSS gradient has no natural width or height; it renders to the element it is applied to. Test it on the actual card, button, banner, and responsive sizes.
Check Readability and Know the Limits
A valid gradient declaration can still fail in context. Review contrast, meaning, and every responsive or interactive state before shipping it.
Test Text Across the Whole Gradient
Contrast can change from one side of the surface to the other. Test text against the least favorable relevant areas and recheck hover, focus, and selected states.
Do Not Use a Gradient as the Only Data Signal
CSS background images provide no native alternative text. Add labels, values, or another accessible representation whenever the colors communicate meaning.
Know What Is Not Exported
This focused generator does not create alpha colors, repeating or layered gradients, custom interpolation spaces, image files, or framework-specific classes.
CSS Gradient Generator FAQ
Direct answers about gradient types, angles, color stops, copied output, privacy, transparency, and accessibility.
Is this CSS gradient generator free to use?
Yes. You can create, preview, and copy CSS gradients without registering, signing in, or unlocking the result.
Which CSS gradient types does it support?
The generator supports linear-gradient(), radial-gradient(), and conic-gradient(). Each type shows only the controls that affect its output.
How many color stops can I add?
You can use two to six opaque color stops. Each stop accepts #RGB or #RRGGBB input and a position from 0% to 100%.
What do CSS gradient angles mean?
For linear gradients, 0deg points upward, 90deg points right, 180deg points down, and 270deg points left. Conic gradients use the angle as the starting rotation around the selected origin.
Can I change the radial or conic origin?
Yes. Radial and conic modes let you place the origin at the center, an edge, or a corner. Radial mode also lets you choose a circle or ellipse.
Can I copy only the gradient value?
Yes. Copy the complete class rule when you need a solid fallback, or copy only the gradient function when you are placing it into an existing declaration.
Why does the generated CSS include a solid background color?
The background-color line provides a simple fallback before background-image applies the gradient. Review that fallback color against any text or controls placed on it.
Does this tool support transparent colors or opacity?
No. This version intentionally accepts opaque #RGB and #RRGGBB colors only. It does not generate alpha, repeating, layered, or custom color-space gradients.
Are CSS gradient backgrounds accessible?
A decorative gradient can be appropriate, but background images are not announced by screen readers and contrast can vary across the surface. Do not use a gradient as the only representation of meaningful data, and test text against the least favorable relevant areas.
Does the tool upload or save my gradient?
No external service is used for the editor. Your settings remain in the current browser tab and reset when the page is reloaded.
Related design tools
Choose a color, check solid-color contrast, style a shadow, or optimize an SVG for the same interface.
Ca Design
Choose and Convert Colors
Pick a color visually or enter a HEX value, then fine-tune RGB, HSL, and opacity. Preview the result, compare nearby tones, and copy the exact color code with no login.
Open tool CS Design
Check Solid Color Contrast
Test text and background colors against WCAG 2.2 AA and AAA. See the exact contrast ratio, preview the selected font size and weight, and identify whether the pair passes.
Open tool Ba Design
Build a CSS Box Shadow
Create layered CSS shadows with up to four editable layers. Adjust offsets, blur, spread, color, opacity, and inset mode, preview the result, and copy the CSS without login.
Open tool Oa Design
Optimize an SVG Graphic
Upload or paste SVG markup, optimize it locally with SVGO, and compare the code, file size, and visual result before downloading. No login or server upload required.
Open toolReady to build the gradient?
Choose the geometry, tune each stop, and copy the exact CSS shown in the preview.