CSS Gradient Generator
Design custom CSS linear and radial gradients visually, manage color stops, and export CSS/Tailwind code.
Generators
Live Gradient Preview
Gradient Settings
0%
100%
CSS Background Code
background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
Tailwind CSS Arbitrary Class
bg-[linear-gradient(135deg,_#ec4899_0%,_#8b5cf6_100%)]
What is a CSS Gradient?
CSS gradients let you display smooth transitions between two or more specified colors. Gradients can be adjusted in directions (angles), shapes (circles or ellipses), and color stop points (percentage values). Because they are rendered by the browser, they scale infinitely without losing quality, reducing the load time compared to background image files.
Types of Gradients
- Linear Gradients (Down, Up, Left, Right, Angles): Colors flow along a straight line. You can control the direction of the flow by setting an angle in degrees (
0degto360deg). - Radial Gradients (Defined by Center): Colors emerge from a single starting point (the center) and radiate outwards in a circular or elliptical pattern.
Features of the Gradient Generator
- Visual Editor: Real-time preview of your gradient as you adjust values.
- Multiple Color Stops: Add, remove, and reposition color stops along the gradient line.
- Angle and Shape Tuning: Precise inputs to control the angle for linear gradients, or shape and origin point for radial gradients.
- Predefined Gradients: Quickly load popular curated presets to kickstart your design.
- Export Options: Instantly copy the CSS
backgrounddeclaration or Tailwind CSS arbitrary value class.