← All Tools
CSS Gradient Generator🔒 100% local
Generate CSS linear/radial gradients from hex colors with live preview and copy-ready code. Privacy-first, runs in your browser.
Related Tools
Type a gradient kind and two or more hex colors, and the page writes the CSS declaration plus four variants of the same ramp. The first comma-separated token decides the kind (anything starting with rad becomes radial, everything else becomes linear), and the remaining tokens are filtered down to valid #rgb or #rrggbb values before being spaced evenly from 0% to 100%. The color list you type is parsed and formatted inside the page, never posted anywhere.
How to use it
- Type the kind first, then the colors: linear, #FF0000, #0000FF - or radial, #FFF, #000.
- Press Generate. A preview strip above the output repaints from the main declaration so you can judge the ramp on screen.
- Use Copy Output for the whole block: main rule, vertical, diagonal, radial and conic variants, and an SCSS line.
Worked example
linear, #FF0000, #0000FFbecomesType: linear
Colors: #FF0000 → #0000FF
CSS:
background: linear-gradient(90deg, #FF0000 0%, #0000FF 100%);
Variants:
/* vertical */ background: linear-gradient(180deg, #FF0000 0%, #0000FF 100%);
/* diagonal */ background: linear-gradient(135deg, #FF0000 0%, #0000FF 100%);
/* radial */ background: radial-gradient(circle, #FF0000 0%, #0000FF 100%);
/* conic */ background: conic-gradient(from 0deg, #FF0000 0%, #0000FF 100%);
SCSS mixin:
@mixin gradient { background: linear-gradient(90deg, #FF0000 0%, #0000FF 100%); }Stops are computed rather than typed: two colors land at 0% and 100%.
linear, #00C6FF, #0072FF, #7C4DFFbecomesType: linear
Colors: #00C6FF → #0072FF → #7C4DFF
CSS:
background: linear-gradient(90deg, #00C6FF 0%, #0072FF 50%, #7C4DFF 100%);
Variants:
/* vertical */ background: linear-gradient(180deg, #00C6FF 0%, #0072FF 50%, #7C4DFF 100%);
/* diagonal */ background: linear-gradient(135deg, #00C6FF 0%, #0072FF 50%, #7C4DFF 100%);
/* radial */ background: radial-gradient(circle, #00C6FF 0%, #0072FF 50%, #7C4DFF 100%);
/* conic */ background: conic-gradient(from 0deg, #00C6FF 0%, #0072FF 50%, #7C4DFF 100%);
SCSS mixin:
@mixin gradient { background: linear-gradient(90deg, #00C6FF 0%, #0072FF 50%, #7C4DFF 100%); }Three colors are spaced at 0%, 50% and 100%.
When to use it
- You need a runnable gradient declaration for a banner or hero section before opening a design tool.
- You have picked two brand colors and want to see the pair in four directions side by side.
- You are moving a plain-CSS rule into an SCSS codebase and want the one-line mixin form as a starting point.
What it does not do
- Non-hex colors are rejected, not converted: linear, red, blue returns 'Provide at least 2 hex colors' because keywords and rgb() values fail the hex filter.
- The kind is judged only by its first three letters, so conic, #f00, #00f silently produces a linear-gradient with no warning.
- Angles, positions and per-stop percentages cannot be expressed. The main declaration is always 90deg, the radial option is always circle at center, and the stops are always evenly divided.
- The SCSS line wraps the finished declaration in @mixin gradient { ... } verbatim, so it is a copy of the output rather than a mixin with parameters.