Linear Gradient Generator
Create CSS linear gradients with custom angles and color stops. Adjust the controls below and copy the generated CSS code.
background: linear-gradient(90deg, #a855f7 0%, #ec4899 100%);How to Use the Linear Gradient Generator
Adjust the angle slider to change the gradient direction. Add up to 8 color stops by clicking the "Add Stop" button. Each color stop has a color picker and a position slider (0% to 100%). The CSS code updates in real-time and can be copied with one click.
What is a CSS Linear Gradient?
A CSS linear gradient creates a smooth transition between two or more colors along a straight line. The direction is defined by an angle (e.g., 90deg for left-to-right, 180deg for top-to-bottom). Linear gradients are commonly used for backgrounds, buttons, and decorative elements.
Linear Gradient Syntax
The basic CSS syntax is: background: linear-gradient(angle, color1 position1, color2 position2, ...). The angle is optional (defaults to 180deg, top to bottom). Color positions are optional percentages that control where each color starts.