CSS Gradient Generator

Create beautiful linear gradients and copy the CSS code instantly.

Configuration

Colors

Color 1

Color 2

Direction

Preview

Generated CSS

.gradient-box {
  background: #FF0080; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FF0080, #7928CA); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FF0080, #7928CA);
}