CSS Gradient Generator
Visually create linear or radial gradients and export CSS code.
Gradient Type
Angle135°
Color Controls
Start Color
#3B82F6
End Color
#EF4444
CSS Output
background: linear-gradient(135deg, #3b82f6, #ef4444);Preview
Usage Guide
- Choose between 'Linear' or 'Radial' gradient type.
- Set the start and end colors, and you can observe the transition changes in between.
- For linear gradients, you can adjust the rotation angle via the slider.
- Once satisfied, click the 'Copy Gradient CSS' button to apply the generated style to your project.
CSS Gradient Knowledge
What are CSS Gradients?
CSS gradients are a variant of the `<image>` data type that allows you to display smooth transitions between two or more specified colors in the background.
Linear vs. Radial
Linear gradients transition smoothly along a straight line, while radial gradients spread outward from a point (usually the center) in a circular or elliptical shape.