How to use the Gradient Generator
- Select colors using the color pickers or choose from presets
- Adjust the gradient direction and color stops as needed
- Copy the CSS code to use in your projects
- Try different themes using the theme switcher in the bottom right
Gradient Preview
Select the type of gradient to create
Color Stops
Advanced Options
Select the size of radial or conic gradients
Select the center position for radial or conic gradients
CSS Output
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
Failed to copy CSS to clipboard. Please try again.