Create beautiful CSS gradients with custom colors and angles. Adjust live and copy the CSS code to use anywhere.

How to use

  1. Pick two colors using the color pickers.
  2. Choose gradient type (Linear or Radial).
  3. Adjust the angle for linear gradients.
  4. Preview updates in real time.
  5. Click Copy CSS and paste into your stylesheet.

Key features

  • Linear and radial gradient types
  • Custom angle (0–360°) for linear gradients
  • Live preview of the result
  • One-click copy of background CSS property
  • Free, no sign-up, runs in browser

Use cases

  • Landing page heroes — eye-catching backgrounds
  • Button styles — gradient CTA buttons
  • Card backgrounds — subtle depth effects
  • Branding — gradient logos and assets
  • Social media graphics — Instagram, Twitter card backgrounds

Linear vs Radial gradients

Linear gradients transition colors along a straight line (defined by angle). Radial gradients emanate from a center point outward. Linear works best for backgrounds and section dividers; radial is ideal for glowing effects and focal points.

FAQ

How do I use the CSS code in my project?

Paste the entire background property into any element's CSS. Works on body, div, button, and all block elements.

Can I use more than 2 colors?

This tool generates 2-color gradients. For multi-stop gradients, edit the copied CSS by adding more colors separated by commas inside the gradient function.

What browsers are supported?

All modern browsers — Chrome, Firefox, Safari, Edge. The standard linear-gradient() and radial-gradient() CSS functions work everywhere since 2013.

Is this free for commercial use?

Yes. Generated CSS code is free for any use including commercial projects.