Create beautiful gradients
Generate CSS gradients with live preview
background: linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);How to Create CSS Gradients
Design beautiful linear, radial, and conic gradients with live preview. Export CSS code or download as PNG for any project.
Choose Gradient Type
Select linear, radial, or conic gradient. Set angle or position for precise control.
Add Color Stops
Click to add colors, drag to position. Use presets for quick starting points or create custom gradients.
Export Your Gradient
Copy CSS code with browser prefixes or download as PNG image. Ready for any project.
Why Use DevSensei?
What makes DevSensei different from other tools
Live Preview
See your gradient update in real-time as you adjust colors, positions, and angles.
Multiple Gradient Types
Create linear, radial, and conic gradients. Each with full customization options.
PNG Export
Download gradient as image for use in designs, presentations, or platforms without CSS.
Frequently Asked Questions
Common questions about this tool
Linear for backgrounds and buttons (most common), radial for spotlight effects and circular elements, conic for pie charts and color wheel effects.
PNG gradients work everywhere - emails, social media, presentations, and apps that don't support CSS. CSS is best for web where you want crisp, scalable gradients.