PICKER

HEX

How do I create a CSS gradient?

Use our gradient generator to create beautiful CSS gradients. Simply click on the gradient slider to add color stops, drag them to adjust positions, and click on handles to change colors using the color picker.

Can I copy the CSS code for my gradient?

Yes! Once you've created your gradient, click the 'Copy CSS' button to copy the complete CSS code to your clipboard. You can then paste it directly into your CSS files.

What's the difference between linear and radial gradients?

Linear gradients transition colors in a straight line (you can control the angle), while radial gradients transition colors in a circular pattern from the center outward.

How many color stops can I add?

You can add as many color stops as you need. Click anywhere on the gradient slider to add a new color stop, or use the '+Add' button in the stops panel.

How do I change the gradient angle?

For linear gradients, click and drag the circular angle control at the top of the generator. You can also click anywhere on the circle to set a specific angle.

Can I use HEX, RGB, or other color formats?

Yes! You can input colors using HEX codes, or use the RGBA sliders. The color picker supports all standard web color formats.

🎨 Interactive Color Picker

Drag and drop color selection with real-time preview. Support for HEX, RGB, and HSL color formats.

📐 Precise Angle Control

Click and drag to set exact gradient angles for linear gradients. Visual angle indicator for easy adjustment.

🔄 Live Preview

See your gradient changes instantly as you drag color stops and adjust settings. No refresh needed.

📋 One-Click Copy

Copy CSS code instantly with a single click. Ready to paste into your stylesheets or HTML.

🎯 Multiple Color Stops

Add unlimited color stops by clicking on the gradient bar. Create complex, multi-color gradients.

⚡ Preset Templates

Start with beautiful pre-made gradient combinations. Perfect for quick design inspiration.