CSS Gradient Generator
Build linear and radial CSS gradients visually. Adjust angle and color stops, then copy the CSS with one click.
0%
100%
background: linear-gradient(90deg, #6366f1 0%, #22d3ee 100%);
Ad · 728×90
Frequently Asked Questions
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a given angle. A radial gradient radiates outward from a center point in a circle or ellipse.
How many color stops can I use?
CSS supports unlimited stops; this tool lets you add up to five, which covers nearly all practical designs.
Do CSS gradients affect performance?
Gradients are rendered by the browser and are far lighter than image files. They also scale perfectly on any screen resolution.
More free tools
- CSV to JSON — Convert CSV data to JSON instantly. Paste and go.
- JSON Formatter — Prettify and validate JSON with syntax highlighting.
- Base64 Encoder — Encode and decode Base64 — two-way, live.
- YAML to JSON — Convert YAML config files to JSON.
- Character Counter — Count characters per platform — Twitter, LinkedIn, meta tags.
- Text Case Converter — camelCase, snake_case, UPPER, Title Case and more.
- Slug Generator — Turn any title into a clean URL-safe slug.
- Line Sorter — Sort, deduplicate, or reverse lines of text.
- Box Shadow Builder — Create and preview CSS box-shadow values.
- Color Contrast Checker — Check WCAG AA/AAA compliance for text colors.
- SVG Optimizer — Minify SVG files. Removes metadata and unused elements.
- SVG to PNG — Export SVG to PNG at any resolution, in browser.
- Favicon Generator — Create ICO and PNG favicons from any SVG or image.