CSS Gradient Generator

Create beautiful linear, radial, and conic CSS gradients with real-time preview and one-click CSS and Tailwind copy.

Customize Parameters

Gradient Type

Angle: 135°

Color 1: #6366F1

Color 2: #EC4899

Gradient Live Canvas

background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

Design Tips

✓Linear gradients create sleek diagonal transitions, ideal for buttons and cards.

✓Radial gradients create soft focus center highlights for hero backgrounds.

✓Copy either pure Vanilla CSS syntax or Tailwind CSS arbitrary value classes.