--- title: "CSS Gradient Generator - Generate CSS for linear and radial gradients" description: "Generate CSS for linear-gradient and radial-gradient backgrounds. You can adjust colors, angles, and positions while previewing the result and checking the code." canonical_url: "https://web-toolbox.dev/en/tools/css-gradient-generator" meta: author: K "og:description": "Generate CSS for linear-gradient and radial-gradient backgrounds. You can adjust colors, angles, and positions while previewing the result and checking the code." "og:image": "https://web-toolbox.dev/og/en/tools/css-gradient-generator-c6b53f7a.png" "og:image:alt": "CSS Gradient Generator" "og:image:height": "630" "og:image:width": "1200" "og:title": "CSS Gradient Generator - Generate CSS for linear and radial gradients" --- > Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt) # **CSS Gradient Generator** Adjust CSS gradients and generate code ## **Gradient Settings** Angle **Color Stops **4 / 8 position 1 % position 2 % position 3 % position 4 % ## **Preview** **CSS Output** ``` background: linear-gradient(135deg, #ff6b6b 0%, #feca57 33%, #48dbfb 66%, #1dd1a1 100%); ``` ## What is CSS Gradient Generator? CSS Gradient Generator is a tool for creating `**linear-gradient**` and `**radial-gradient**` backgrounds, previewing them live, and copying the resulting CSS. As you change colors, angles, shapes, and stop positions, the `**background**` code updates immediately. It is useful for hero sections, card backgrounds, banners, buttons, and other UI areas that need a gradient instead of a flat color. ## How to Use 1. Choose either a linear or radial gradient. 2. Add, remove, and reposition color stops. 3. Set the angle for linear gradients or the shape for radial gradients. 4. Check the live preview. 5. Copy the generated `**background: ...;**` code. You can add up to 8 color stops, and the **Equal Position** control helps spread them evenly before fine-tuning. ## Main Settings ### Gradient Type Switch between linear and radial gradients. Linear gradients use an angle, while radial gradients use a shape such as `**circle**` or `**ellipse**`. ### Angle This setting appears for linear gradients. It supports values from 0 to 360 degrees, and common angles can be selected quickly from preset buttons. ### Color Stops Each stop can be placed between 0% and 100%. This lets you control where one color starts blending into the next. ## Input and Output Example For example, if you use a linear gradient with `**135deg**` and four color stops, the output can look like this: ```css background: linear-gradient(135deg, #ff6b6b 0%, #feca57 33%, #48dbfb 66%, #1dd1a1 100%); ``` If you switch to a radial gradient, the output becomes a format like this: ```css background: radial-gradient(circle, #ff6b6b 0%, #feca57 33%, #48dbfb 66%, #1dd1a1 100%); ``` ## Linear vs. Radial ### Linear Gradient Use this when you want the color flow to follow a direction. It works well for hero areas, banners, buttons, and other wide background surfaces. ### Radial Gradient Use this when you want color to spread from a center point. It is a good fit for spotlight-like accents or softer focal backgrounds. ## Use Cases - Creating gradient backgrounds for web pages - Replacing flat button or card backgrounds with something richer - Trying different banner or hero treatments - Adjusting stop positions while checking the generated CSS at the same time ## Things to Keep in Mind - Too many colors can make a background feel visually busy - If text sits on top of the gradient, readability should be checked separately - The tool generates `**background**` code, so background size or positioning rules may still need to be added in your project **How was your experience?** Last updated: November 20, 2025 ### **Related Tools** - [

**Border Radius Generator**

](https://web-toolbox.dev/en/tools/border-radius-generator) - [

**Box Shadow Generator**

](https://web-toolbox.dev/en/tools/box-shadow-generator) - [

**CSS Background Pattern Generator**

](https://web-toolbox.dev/en/tools/css-background-pattern-generator) - [

**CSS Filter Generator**

](https://web-toolbox.dev/en/tools/css-filter-generator) - [

**Gradient Text Generator**

](https://web-toolbox.dev/en/tools/gradient-text-generator) - [

**Squircle Generator**

](https://web-toolbox.dev/en/tools/squircle-generator) - [

**CSS Cursor Viewer**

](https://web-toolbox.dev/en/tools/css-cursor-viewer) - [

**SVG to CSS Converter**

](https://web-toolbox.dev/en/tools/svg-to-css) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/en#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"en-US","name":"Web ToolBox","url":"https://web-toolbox.dev/en","translationOfWork":{"@id":"https://web-toolbox.dev/#website"}},{"@id":"https://web-toolbox.dev/en/tools/css-gradient-generator#webpage","@type":"WebPage","description":"Generate CSS for linear-gradient and radial-gradient backgrounds. You can adjust colors, angles, and positions while previewing the result and checking the code.","name":"CSS Gradient Generator - Generate CSS for linear and radial gradients","url":"https://web-toolbox.dev/en/tools/css-gradient-generator","isPartOf":{"@id":"https://web-toolbox.dev/en#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/en/tools/css-gradient-generator"]}]},{"@id":"https://web-toolbox.dev/en/tools/css-gradient-generator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"Generate CSS for linear-gradient and radial-gradient backgrounds. You can adjust colors, angles, and positions while previewing the result and checking the code.","name":"CSS Gradient Generator - Generate CSS for linear and radial gradients","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]} ``` ## Sitemap See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.