Toolzie

CSS Linear Gradient Generator

90deg
Copied!

How to Use the CSS Gradient Generator

Add color stops, drag to position, adjust angle. Live preview. CSS updates automatically. Copy to stylesheet.

Building gradients from scratch is tedious. Visually design and get ready CSS in seconds.

Frequently Asked Questions

Multiple colors?

Yes, add many stops for complex gradients.

Cross-browser?

Yes, standard CSS linear-gradient supported.

Radial?

Modify code for radial-gradient.

Usage?

Copy as background property on elements.

Share:
Helpful?

About This Tool

Create stunning CSS linear gradients with the Toolzie CSS Linear Gradient Generator. Pick your colours, adjust the angle, add multiple colour stops, and copy the finished CSS gradient code — all with a live preview.

How to Use

  1. Select your start and end colours using the colour pickers.
  2. Adjust the gradient angle using the slider or degree input.
  3. Add additional colour stops for multi-colour gradients.
  4. Copy the generated CSS background property to your stylesheet.

Frequently Asked Questions

How do I create a diagonal gradient?

Set the angle to 45deg for a diagonal top-left to bottom-right gradient, or use any angle between 0–360 degrees.

Can I create a transparent gradient?

Yes — set any colour stop to have 0% opacity to create fade-to-transparent effects.

Is this compatible with all browsers?

Yes — modern CSS linear-gradient is supported by all current browsers without prefixes.

Can I add more than two colours?

Yes — click 'Add Color Stop' to add as many colours as you want at custom positions along the gradient.