CSS Gradient Generator
Generate beautiful CSS gradients with live preview. Create linear, radial, and conic gradients with custom colors, angles, and positions. Copy ready-to-use CSS.
Gradient type
135°
Color stops
#667eea0%
#764ba2100%
Presets
CSS Output
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
How to Use CSS Gradient Generator
- 1Choose gradient type: linear, radial, or conic.
- 2Add color stops and set their positions.
- 3Adjust angle or direction for linear gradients.
- 4Copy the generated CSS to use in your project.
Zenovay
Privacy-first analytics for your website
Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.
Related Tools
CSS Gradient GeneratorCreate beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients.
CSS Box Shadow GeneratorDesign CSS box shadows with visual controls. Adjust offset, blur, spread, and color.
CSS Border Radius GeneratorCreate custom border radius values with visual controls. Link or unlink corners for quick adjustment.
CSS Flexbox PlaygroundLearn and generate CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap in real time.
Frequently Asked Questions
What is a CSS gradient?▾
A CSS gradient is a smooth transition between two or more colors, created with no image files. Types: linear-gradient() — colors along a straight line at a specified angle; radial-gradient() — colors radiating outward from a center point; conic-gradient() — colors swept around a center point (like a pie chart, supported in all modern browsers); repeating-* variants repeat the pattern. Gradients are values for the background-image property, not background-color.
How does linear-gradient work?▾
Syntax: linear-gradient(direction, color-stop1, color-stop2, ...). Direction: angle (0deg = bottom to top, 90deg = left to right) or keyword (to right, to bottom left). Color stops: colors with optional positions. Example: linear-gradient(135deg, #ff6b6b 0%, #ffd93d 50%, #6bcb77 100%). Without positions, stops are evenly distributed. With positions: linear-gradient(to right, red 20%, blue 80%) means 20% red, then transition, then 80% blue to end.
What are color hints in gradients?▾
Color hints (also called transition hints or midpoints) control where the midpoint of the gradient transition occurs. Normally, transitions are linear between stops — the midpoint is exactly between two colors at 50%. A hint moves that midpoint. Example: linear-gradient(to right, red, 25%, blue) — the red-to-blue transition midpoint is at 25% (closer to red side), making it look more blue overall. Supported in all modern browsers.
What is the difference between radial and conic gradients?▾
radial-gradient() radiates from a center point outward in elliptical or circular shapes. Syntax: radial-gradient(shape size at position, colors). Example: radial-gradient(circle at center, white, black). conic-gradient() sweeps colors around a center point like a color wheel or pie chart. Syntax: conic-gradient(from angle at position, colors). Example: conic-gradient(red, yellow, green, blue, red). Both support color stops with percentage positions.
How do I use gradients in Tailwind CSS?▾
Tailwind supports linear gradients via: bg-gradient-to-{direction} (e.g. bg-gradient-to-r) + from-{color} + via-{color} (optional) + to-{color}. Example: class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500". For radial/conic gradients or complex custom gradients, use the [arbitrary value] syntax: bg-[radial-gradient(circle,_#ff6b6b,_#4158d0)] or add a custom gradient to tailwind.config.js backgroundImage. Tailwind v3.3+ improved arbitrary gradient support.