Stops are positions, not widths
Each stop specifies a color at a percentage along the gradient. Stops are sorted by position when CSS is exported. Two stops at the same position can create a hard transition; their existing order is preserved.
ONELESS / COLOR
CSS Gradient Generator
A gradient gives colors a position and a direction. Build a linear sweep or a centered radial blend, select the stops that shape it and copy the exact CSS used by the preview. The result stays visible while you make small changes to color or spacing.
Open CSS Gradient Generator. JavaScript powers the workspace; the full guide is available below.
UNDERSTAND THE RESULT
Color, with a little context.
Angle belongs to linear gradients
In CSS, 0 degrees points upward and 90 degrees points right. Radial mode uses a circle at the center, so the angle control is disabled while that mode is selected.
Transparency remains in the CSS
The color field accepts 3/4/6/8-digit HEX. An alpha color blends against the page beneath it. Preview typography is only a composition example; the copied CSS contains the gradient, not the text.
HOW TO USE IT
From a starting point to a usable result.
- Choose Linear or Radial. For Linear, adjust the angle to find the direction you want.
- Select a stop on the rail or its labeled button, then change its HEX color and position. Add up to five stops or remove stops until two remain.
- Copy CSS to obtain a background declaration. Reset returns the initial three-color linear gradient.
A WORKED EXAMPLE
A simple left-to-right background
Use two stops: #E7B194 at 0% and #5265AA at 100%, then set the linear angle to 90 degrees. The output is background: linear-gradient(90deg, #E7B194 0%, #5265AA 100%);
EVERYDAY USES
Make the next small decision easier.
Create a section background
Shape a restrained blend behind a page section. Test any overlaid text against the actual colors beneath it rather than assuming one contrast result covers the whole gradient.
Make a transparent overlay
Use alpha HEX stops for an overlay that lets an underlying image show through. Review it on the real image because transparency changes the visible colors.
LOCAL WORKSPACE
Your work stays in this browser.
The tool processes color values locally. It does not upload the input to a processing server or save it in browser storage. Leaving or reloading the page clears the working state. Copying places the selected result on your clipboard; sharing sends only the page address without your working values.
These tools describe sRGB colors. Browser decoding, color management and the display can affect what you see; they are not an ICC proofing workflow or a print-color guarantee. Read the site privacy policy for information about the surrounding website.
KEEP IT NEARBY
One less search next time.
Press Ctrl + D on Windows or Command + D on Mac to bookmark this page. Your browser may also offer Create shortcut or Add to Home Screen. Shortcuts open the tool; they do not include your colors or images.
Choose a shortcut icon
Soft Coral
Warm Peach
Sunset Orange
OneLess Blue
Rose PinkQUESTIONS, ANSWERED
A few useful details.
Does copying include the sample text?
No. Copy CSS exports only the background declaration shown beneath the preview. The decorative specimen is there to help judge the composition.
Can stops cross one another?
Yes. Export sorts them by percentage. Equal-position stops preserve their relative order and may form a hard edge.
Is radial angle supported?
The radial gradient is a centered circle. Angle applies only to Linear and is disabled in Radial mode.
Can I export an image or animation?
This tool exports CSS. Use Gradient Generator to create and download a PNG image. Neither tool creates animation or repeating gradients in this release.
How do I create a sharp boundary instead of a smooth blend?
Place two different-color stops at the same percentage. Their order controls the colors on either side of the hard edge.
Can a gradient fade into transparency?
Yes. Use an alpha HEX color for a stop. The surrounding page background will show through transparent areas, so preview it against the surface where you will use the CSS.
Where do I paste the generated CSS?
Copy the background declaration into the CSS rule for your element. Give the element a visible width and height or content so there is an area for the gradient to paint.
REFERENCES
ANOTHER SMALL STEP
Keep the next tool close.
Ready for a little more color?
Give your colors a direction. Shape the result and copy the CSS.
Return to CSS Gradient Generator ↑