🌈 Gradient Generator

Create custom gradients for your projects

90°
%
%

Button

Card

Avatar

CSS
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
Tailwind (Arbitrary)
style={{ background: 'linear-gradient(90deg, #667eea 0%, #764ba2 100%)' }}
CSS Variable
:root {
  --gradient: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.element {
  background: var(--gradient);
}