A gradient is a visual effect that transitions smoothly from one color to another.

Can I use this tool for commercial projects?

Yes, our tool is free to use for any project, including commercial ones.

How do I adjust the gradient angle?

You can adjust the angle by clicking and dragging on the gradient map.

Yes, you can save your gradients to your account for easy access later.

Yes, we take the security of your data very seriously and use industry-standard encryption.

online

Generate linear and radial CSS gradients visually.

Angle: 90°

Color 1

Color 2

Stop 1: 0%

Stop 2: 100%

Preview

CSS

background: linear-gradient(90deg, #c9f03c 0%, #0f0f0f 100%);

Select from linear or radial gradients to suit your design needs.

Adjust color stops, angles, and positions to create a unique gradient effect.

Get the CSS code for your gradient and paste it into your project.

Generate CSS box-shadow with live visual preview.

Generate CSS border-radius visually.

Format and beautify CSS code online.