CSS Gradient Generator
Create beautiful linear and radial CSS gradients with a live preview
Gradient Settings
CSS Output
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
CSS Gradient Generator
Create beautiful linear and radial CSS gradients with a live preview. Add multiple color stops, adjust angles, and copy the ready-to-use CSS code in one click.
FAQ
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors generated by the browser — no image file needed. Use background: linear-gradient() or radial-gradient().
How do I make a gradient with transparency?
Use rgba() or hsla() colors with an alpha value less than 1, or use the keyword 'transparent' as one of the color stops.
What is the difference between linear and radial gradients?
Linear gradients transition along a straight line (e.g. top to bottom). Radial gradients radiate outward from a center point in a circle or ellipse.
Continue Exploring
Other Developer Tools you might like...
JSON Formatter
Format, validate, and minify JSON data with syntax highlighting
Base64 Encoder/Decoder
Encode text to Base64 and decode Base64 strings
URL Encoder/Decoder
Encode and decode URL components and query strings
UUID Generator
Generate random UUID v4 identifiers
Hash Generator
Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from text
Regex Tester
Test and debug regular expressions with match highlighting
JWT Decoder
Decode and inspect JWT token header and payload
HTML Formatter
Beautify and format HTML code with proper indentation