FT

Gradient Generator

Create stunning CSS gradients with our free online gradient generator. Linear and radial gradients with live preview and CSS code export.

gradientcssgeneratorgradient generatorcss gradient

Live Preview

Gradient Settings

%
%

Generated CSS

background: #667eea; /* Fallback */
background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: -moz-linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

About CSS Gradient Generator

Create beautiful CSS gradients with our free online generator. Support for linear and radial gradients with multiple color stops and customizable angles.

Features

  • Linear gradients with custom angles
  • Radial gradients with circular patterns
  • Multiple color stops
  • CSS code with vendor prefixes
  • Copy-ready code for production

Configuration Format

Use JSON to configure your gradient:

{
  "type": "linear",
  "angle": 135,
  "colors": [
    { "color": "#667eea", "stop": 0 },
    { "color": "#764ba2", "stop": 100 }
  ]
}