build linear and radial CSS gradients visually. adjust angle, add color stops, pick from presets — copy the CSS with one click.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
CSS Gradient Generator lets you build linear and radial CSS gradients visually. Adjust the angle, add and position color stops, pick from preset gradients, and copy the CSS code with one click.
See a live preview of your gradient as you tweak it. Add up to 10 color stops, adjust their positions, and switch between linear and radial modes. The tool generates the exact CSS property value you need.
No more guessing gradient angles or color stop percentages. Build the gradient visually, get the CSS, and paste it into your stylesheet.
Choose gradient type
Select linear or radial gradient mode.
Add color stops
Click to add color stops. Pick colors and drag to adjust their positions along the gradient.
Adjust the angle
For linear gradients, set the angle in degrees. For radial gradients, choose the shape and position.
Copy the CSS
Copy the generated CSS background property to paste directly into your stylesheet.
Website backgrounds
Create gradient backgrounds for hero sections, banners, and page backgrounds.
Button styling
Build gradient backgrounds for buttons and interactive elements.
Card designs
Add subtle gradients to card backgrounds and overlays.
Text effects
Use gradients with background-clip for gradient text effects.
Loading indicators
Create gradient color schemes for progress bars and loading animations.
PDF utilities, image tools, developer helpers — all free, no signup.
Add text or logo watermarks to photos with custom position, opacity, and tiling.
Live regex tester and debugger.
Convert text between UPPERCASE, lowercase, Title Case, camelCase, snake_case, kebab-case, and more.
Resize photos to exact dimensions with aspect ratio lock.
Compare two texts side by side with line-by-line diff highlighting.
Generate SEO meta tags, Open Graph, and Twitter Card HTML.