Color Tools
CSS Gradient Generator
Create beautiful CSS gradients with a live visual preview
background: linear-gradient(to right, #3b82f6 0%, #8b5cf6 100%);
How to Use
Pick a Color
Explore Options
Get Results
Copy Values
Learn More
How to Build a Two-Colour Background Gradient and Copy the Finished Rule
Start from the two stops already loaded, blue at 0 percent and violet at 100 percent, then click either swatch to open your operating system colour picker and choose your own hex values. The live preview panel above the controls repaints instantly, so you judge the blend with your eyes rather than guessing from code. Drag each position slider to move a stop anywhere between 0 and 100 percent. The generator sorts stops by position before writing the rule, so you cannot break the syntax by dragging one past another. When the preview looks right, press Copy beside the Generated CSS box and paste the complete background declaration straight into your stylesheet.
Linear, Radial or Conic: Which Gradient Type Suits Buttons, Cards and Loaders
The Type pills switch between the three CSS gradient functions, and each one suits a different job. Linear runs colour along a straight axis and is the safe pick for hero backgrounds, button fills and long section dividers. Radial is emitted as radial-gradient with the circle keyword, spreading colour outward from the centre, which reads well for spotlight effects, avatar glows and soft card vignettes. Conic sweeps colour around the centre like a clock hand, so it is the one people reach for when building pie chart slices, progress rings and loading spinners. The Direction pills appear only for linear, because radial and conic here use their default centre origin instead of a directional axis.
Fixing a Gradient That Looks Muddy in the Middle or Banded on Large Sections
Two complementary colours placed at 0 and 100 percent often pass through a dull grey middle, because the browser interpolates in a straight line through sRGB. The fix is rarely a different pair of colours, it is a third stop. Use Add Stop to drop an intermediate hue near the midpoint, then drag its slider until the muddy band disappears. Visible banding across a tall hero usually means the stops sit too far apart for the height available, so pulling them closer together, say 20 and 80 percent instead of 0 and 100, shortens the transition and hides the steps. You can hold up to five stops, enough for most multi-hue blends before the rule becomes unreadable.
Pasting the Output Into Tailwind, styled-components or a Plain Stylesheet
The output is a complete declaration, so a plain stylesheet or a CSS module needs nothing beyond a paste inside your selector. For styled-components or emotion, drop the same line into the template literal untouched. Tailwind users should take only the function call, the part after the background keyword, and wrap it in an arbitrary value such as bg-[linear-gradient(to_right,#3b82f6_0%,#8b5cf6_100%)], swapping spaces for underscores as the Tailwind parser requires. In a React inline style object, use the camelCase key background and pass the function call as a plain string. For an SVG or canvas fill you will need to rebuild the stops in that format, because CSS gradient syntax does not carry across to either one.
What This Generator Deliberately Leaves Out and How to Extend the Rule by Hand
It is worth knowing the edges of a small tool. Linear direction is limited to six presets, four keyword directions plus 45 and 135 degrees, so any other angle means editing the copied rule and typing your own degree value. Radial always emits the circle keyword, never ellipse, and offers no custom size or at position origin. Conic accepts no from angle. There are no repeating gradients, no alpha transparency because the native colour input returns opaque hex only, and no saved history of past gradients. Every one of those is a short edit on the copied output, which is exactly why the tool hands you readable CSS rather than a compressed blob you cannot adjust.
Frequently Asked Questions
Select Linear as the type, then click the 45deg pill in the Direction row. The preview tilts straight away and the output becomes linear-gradient(45deg, ...). The diagonal keywords, to bottom right and to bottom left, behave differently because they always aim at the box corners whatever its shape, while 45deg stays a fixed angle. For any other angle, copy the rule and edit the number yourself.
A conic gradient sweeps all the way around and wraps back to its starting angle, so when the first and last stops are different colours the join shows as a visible edge. Add a stop at 100 percent using the same hex value as your stop at 0 percent and the sweep closes smoothly. That seam is normal CSS behaviour, not a preview glitch.
Yes, but you need two lines this tool does not emit. Paste the background declaration onto the text element, then add background-clip: text and color: transparent, keeping the -webkit- prefixed background-clip for older Safari and Chrome builds. The element must be inline-block or a block with real width, otherwise the gradient box collapses and the letters render flat or invisible.
Copy the CSS, remove the background: prefix and the trailing semicolon, then replace every space inside the function with an underscore. linear-gradient(to right, #3b82f6 0%, #8b5cf6 100%) becomes bg-[linear-gradient(to_right,#3b82f6_0%,#8b5cf6_100%)]. Tailwind reads unescaped spaces as class separators, which is the usual reason a pasted gradient silently refuses to render in the browser.
No. The whole generator runs in your browser as client-side React. The gradient string is built in local component state and the preview is simply an inline style applied to a div. There is no API call, no account and no storage layer, so nothing persists between page loads. Refreshing resets the tool to the default blue and violet pair.