CSS Gradient Picker
Choose from 8 beautiful preset gradients or create your own by picking colors and angle. Get the CSS code instantly with a live preview.
Click a preset or customize your own gradient.
How to use
- Click any preset gradient button to apply it instantly.
- Or pick your own colors and angle using the controls below.
- Copy the CSS code with one click.
Frequently asked questions
What is the difference between this and the Gradient Generator?
The Gradient Picker focuses on curated presets with one-click application, making it faster to find a beautiful gradient. The Gradient Generator offers more control with 3 colors and multiple gradient types.
Can I customize the presets?
Yes — click a preset to load it, then adjust the colors and angle to your liking. The CSS updates live.
Are these gradients browser-compatible?
Yes — linear-gradient() is supported in all modern browsers. No vendor prefixes are needed for modern browsers.
Can I use these in Tailwind CSS?
Yes — paste the CSS value into a Tailwind arbitrary value: bg-[linear-gradient(135deg,#6366f1,#ec4899)]. Or add it to your CSS file directly.