Live PreviewCopy CSS13 Presets
0%
100%
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
How It Works
1
Pick a Type
Choose linear, radial, or conic gradient type.
2
Customize Colors
Add color stops and adjust positions for your gradient.
3
Copy the CSS
Copy the generated CSS code and paste it into your project.
Frequently Asked Questions
What types of CSS gradients can I create?
You can create linear gradients (with customizable angle), radial gradients (circular), and conic gradients. Each type supports multiple color stops for complex gradient effects.
How do I add more colors to my gradient?
Click the "Add Stop" button to add a new color stop. You can add up to 10 color stops. Each stop has its own color picker and position slider to control placement.
Can I copy the CSS code?
Yes, the generated CSS code is displayed below the preview. Click the "Copy" button to copy the full background property to your clipboard, ready to paste into your stylesheet.
Part of these workflows
Love this tool? Explore 999+ more
Free online tools for images, PDFs, text, code, and more. All running in your browser.
Explore All Tools