CSS Gradient Generator (linear and radial)
Edit the color stops and angle of a linear or radial gradient, watch the live preview and copy the CSS background code.
- Runs in your browser (no upload)
0deg runs from bottom to top, 90deg from left to right and 180deg from top to bottom (0–360).
Color stops
Use 2 to 10 stops. The CSS lists them in order of position.
Result
Preview
Generated CSS
background: #4158d0;
background: linear-gradient(90deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);How to use
- Choose linear or radial, then set the angle, or the shape and center position.
- Edit each color stop (#RRGGBB etc.) and its position (0–100%). Use "Add a color stop" to add more and × to remove one.
- Check the preview and press "Copy CSS" to paste the generated CSS into your stylesheet.
FAQ
Which way do 0deg and 90deg point?
In CSS linear-gradient, 0deg runs from bottom to top (to top), 90deg from left to right (to right) and 180deg from top to bottom (to bottom).
What happens if two stops share a position?
The colors switch sharply at that point instead of blending, which is useful for stripes.
Why are there two background lines?
The first line is a solid fallback color, so the first color still shows where gradients are not supported.
Can I use color names such as red, or rgb()?
For safety only hex colors (#RGB, #RGBA, #RRGGBB, #RRGGBBAA) are accepted, and no other text is ever written into the CSS.
Notes & limitations
- What you enter is processed only on this page and is not sent to YUCTS servers.
- Only hex colors are supported. Color names, rgb(), hsl() and keywords such as transparent cannot be used (for transparency, use the last two digits of #RRGGBBAA).
- Conic and repeating gradients and color interpolation options are not supported.
- The preview shows how your browser renders the gradient. Older browsers may not display 8-digit (#RRGGBBAA) colors.
Related tools
- JSON Formatter & ValidatorValidate JSON and see the exact line and column of any syntax error. Pretty-print with 2 or 4 spaces or tabs, minify, sort keys, then copy or download.
- CSV ⇄ JSON ConverterConvert CSV or TSV to JSON and JSON back to CSV or TSV. Handles quoted fields, line breaks in cells, UTF-8 BOM, delimiter detection and Shift_JIS, and lets you pick, reorder and rename columns.
- YAML ⇄ JSON ConverterConvert YAML to JSON and JSON to YAML safely: custom or executable tags are never loaded, alias expansion is limited, and errors show the line and column.
- Base64 Encoder & Decoder (Text and Files)Encode text (including emoji and any language) to Base64 as UTF-8 and decode it back. Supports URL-safe Base64, optional padding, files and data URLs.
- URL Encoder & Decoder (Percent-Encoding)Percent-encode or decode URLs and query strings in any language with encodeURIComponent, encodeURI or form encoding (+). Broken % sequences show the exact error position.
- Regex Tester (JavaScript)Test JavaScript regular expressions with highlighted matches, numbered and named groups and a replace preview. Patterns that run too long (ReDoS) are stopped automatically.