Gradient Generator
Create linear, radial, and dark CSS gradients with live preview — copy the code instantly.
Gradient Generator
Create beautiful CSS gradients
0°90°180°270°360°
background: linear-gradient(135deg, #667eea, #764ba2);Modern Design: CSS gradients create smooth color transitions perfect for backgrounds, buttons, and design elements. Copy the generated CSS and paste it directly into your stylesheet.
How to Create CSS Gradients Online
1. Choose gradient type
Pick linear, radial, or conic gradient. Linear gradients flow in a straight line, radial gradients radiate from a center point, and conic gradients sweep around a point.
2. Pick your colors
Add color stops and adjust their positions. You can create dark gradient CSS, black gradients, vibrant multi-color gradients, or anything in between using the color picker.
3. Copy the CSS code
The CSS gradient code is generated in real time. Copy it and paste it directly into your stylesheet as a background property — it works on any HTML element.
CSS Gradient Types
Linear Gradient
Transitions colors in a straight line. Control direction with "to right", "to bottom", or any angle like 45deg.
background: linear-gradient(to right, #ff0000, #0000ff);Radial Gradient
Colors radiate outward from a center point. Great for glowing effects and spotlight-style backgrounds.
background: radial-gradient(circle, #ff0000, #0000ff);Dark / Black Gradient
Dark gradient CSS is popular for hero sections, cards, and overlays. Combine deep blacks with dark blues or purples.
background: linear-gradient(135deg, #1a1a2e, #16213e);CSS Linear Gradient Syntax
/* Basic syntax */
background: linear-gradient(direction, color-stop1, color-stop2, ...);
/* Examples */
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
background: linear-gradient(45deg, #000000, #434343);
background: linear-gradient(to bottom, #1a1a2e, #16213e, #0f3460);
Popular Gradient Use Cases
Hero Backgrounds
Full-page CSS gradient backgrounds for landing pages — dark gradients with deep blues and purples are especially popular.
Button Gradients
Apply gradient CSS to buttons for a modern look: background: linear-gradient(to right, #f093fb, #f5576c).
Text Gradients
Use background-clip: text with a CSS gradient to create colorful gradient text effects.
Overlays
Dark gradient CSS overlays on images (background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8))) for text legibility.
Card Backgrounds
Subtle light gradients on card components add depth without heavy visual noise.
CSS Black Gradient
Deep black gradients (linear-gradient(135deg, #0c0c0c, #1a1a1a)) are widely used for dark-mode UI design.
Frequently Asked Questions
Common questions about CSS Gradient Generator