CSS · Design

Gradient Generator

Build linear or radial gradients and copy ready-to-use CSS.

background: linear-gradient(135deg, #00236F, #60A5FA);

How to use

  1. Choose linear or radial.
  2. Set colors and angle (for linear).
  3. Copy the CSS background value.

Features

  • Linear and radial
  • Live preview
  • Copy CSS
  • Runs in your browser. Colors and images are not uploaded to ToolsWeb servers.

Privacy & how it works

This design utility runs in your browser. Colors, CSS, and images you enter are not uploaded to ToolsWeb servers for this tool. Privacy Policy.

FAQ

Can I add more color stops?expand_more

Extend the copied CSS with extra stops as needed in your stylesheet.

Is this tool free?expand_more

Yes. No signup and no paywall for core use.

Is my text uploaded?expand_more

No for this tool. Text stays in your browser while you work.

Do I need an account?expand_more

No. Open the page and start typing or pasting.

Related tools