CSS Gradient Generator
Build stunning linear and radial CSS gradients with a visual color picker, angle control, and code export
Color Stops
background: linear-gradient(135deg, rgba(102,126,234,1.00) 0%, rgba(118,75,162,1.00) 100%);
Presets
How to Use This Tool
Choose a gradient type: Linear, Radial, or Conic.
Set the angle (linear/conic) or position (radial).
Add, remove, and customize color stops — adjust color, position, and opacity.
Preview the gradient in real time and copy the CSS output.
Browse 20+ preset gradients for instant inspiration.
About This Tool
CSS Gradient Generator is a visual tool for creating beautiful CSS gradients. Supports linear, radial, and conic gradient types with full control over angle, position, and color stops. Each color stop has adjustable color, position, and opacity. Choose from 20+ preset gradients or build your own from scratch. The generated CSS code includes cross-browser support and is ready to paste into your project.
Frequently Asked Questions
Linear: colors flow in a straight line at a set angle. Radial: colors radiate from a center point outward. Conic: colors sweep around a center point like a pie chart.
Yes! Use the opacity slider on any color stop to make it partially or fully transparent.
Share This Tool
Related Tools
Color Palette Generator
Generate harmonious color palettes with complementary, analogous, and triadic color scheme support
Color Contrast Checker
Check WCAG 2.1 color contrast ratios to ensure your designs meet AA and AAA accessibility standards
Glassmorphism Generator
Create modern frosted-glass UI effects with adjustable blur, transparency, and border styling in pure CSS
Neumorphism Generator
Design elegant soft-shadow neumorphic UI elements with customizable depth, color, and shape controls
CSS Unit Converter
Convert between px, rem, em, vh, vw, and other CSS units based on your root font size settings