Gradient Generator

Design

Create and customize beautiful CSS gradients. All generated code is available for you to copy and use in your projects.

Adjust Colors: Use the color pickers to select your desired gradient colors. Add or remove colors as needed.
Set Stops & Angle: Use the sliders to adjust the color stops and the gradient angle (for linear gradients).
Choose Type: Select between a "Linear" or "Radial" gradient.
Preview & Copy: See a live preview of your gradient and click "Copy CSS" when you're ready.

Gradient Type

Linear

Radial

Angle 90°

Colors

Color 1

Stop 0%

Color 2

Stop 100%

background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%);

Loading Ad...

Related Tools

Explore other tools in the Design category.

Visualize and generate CSS border-radius.

Generate CSS box shadows visually.

Convert between HEX, RGB, and HSL values.

Generate color palettes from a single color.

Generate lighter and darker shades of a color.

Preview CSS animations and get the code to use them.