Preview
CSS code
background: linear-gradient(to right, #FF5A24, #8B5CF6);

SocialShrink's Gradient Generator helps you create stunning CSS gradients with a visual editor. Choose colors, set the direction, and copy the CSS code. Everything runs in your browser.

How it works

  1. Pick your colors
    Use the color pickers to choose your gradient start and end colors.
  2. Set the direction
    Choose from 8 linear directions or a radial gradient.
  3. Copy the CSS
    Copy the generated CSS code to use in your project.

Your privacy

No data is sent to any server. The gradient is generated in your browser.

Frequently asked questions

Can I use more than 2 colors?
Currently the tool supports 2-color gradients. Multi-stop gradients may be added in the future.
What CSS is generated?
Standard CSS linear-gradient() or radial-gradient() code that works in all modern browsers.
Can I save my gradients?
You can copy the CSS code and save it in your project. A favorites feature may be added later.
Does it work offline?
Yes. Once loaded, it works without internet.

Related tools