About this tool
Create polished CSS3 linear and radial background gradients with customizable angles, color stop positions, opacity controls, and ready-to-paste CSS code.
Gradient Builder
Build smooth CSS linear and radial gradients with interactive color stops, angles, and live code generation.
Example
- color1: #0f172a
- color2: #26e0ff
- color3: #a8ff2f
- angle: 135
Output
CREATORWaiting
Run the tool to generate output.
When to use this tool
Use Gradient Builder when crafting hero sections, cards, buttons, or typography text-fill backgrounds with modern CSS3 gradients.
Inputs, Formats & Specifications
- Accepted Inputs
- Gradient angle (0°–360°), linear/radial type, multiple color stop hex codes and percentages
- Output Formats
- CSS `background` and `background-image` declaration snippets
- Supported Standards
- CSS3 `linear-gradient()` and `radial-gradient()`
- Browser Limits & Scope
- Outputs modern standards-compliant CSS3. Older legacy browser vendor prefixes (-webkit-, -moz-) are omitted for modern lightweight code.
How to use this tool
- Select gradient type: Linear Gradient or Radial Gradient.
- Adjust the angle wheel or slider (from 0° to 360°) to set the gradient direction.
- Add, reposition, or delete color stops and choose colors using the visual color picker.
- Preview the gradient on a live responsive canvas and copy the generated CSS snippet.
Examples
Modern Dark Mode Hero Background
Build a subtle 135-degree linear gradient transitioning from deep slate (#0f172a) to midnight navy (#1e1b4b) with a vibrant cyan accent stop.
CTA Button Radial Glow
Create a radial gradient button background with a glowing neon lime center fading to an emerald border.