CSS Gradient Generator
Create beautiful CSS gradients visually. Drag color stops, choose from linear, radial, or conic gradients, pick from 24 presets, and copy cross-browser CSS or Tailwind classes.
Settings
Color Stops (2/10)
CSS Code
background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);bg-gradient-to-br from-[#667eea] to-[#764ba2]Browser Compatibility
The generated CSS includes the -webkit- prefix for older Safari and Chrome versions. Linear and radial gradients are supported in all modern browsers with over 98% global coverage.
Gradient Presets (24)
CSS Gradient Properties
| Property | Description | Example |
|---|---|---|
| linear-gradient() | Creates a gradient along a straight line at a specified angle | linear-gradient(90deg, #f00, #00f) |
| radial-gradient() | Creates a gradient radiating from a center point outward | radial-gradient(circle, #f00, #00f) |
| conic-gradient() | Creates a gradient with color transitions rotated around a center point | conic-gradient(from 0deg, #f00, #00f) |
| Color stops | Define colors at specific positions along the gradient | #ff0000 0%, #0000ff 100% |
| Angle (deg) | Direction of linear gradients (0deg = up, 90deg = right) | linear-gradient(135deg, ...) |
| rgba() | Color with alpha transparency for see-through gradients | rgba(255, 0, 0, 0.5) |
| -webkit- prefix | Vendor prefix for older WebKit browsers (Safari, Chrome) | -webkit-linear-gradient(...) |
Related CSS Tools
Frequently Asked Questions
What types of CSS gradients can I create?
This tool supports linear gradients (straight-line color transitions at any angle), radial gradients (circular or elliptical gradients emanating from a center point), and conic gradients (color transitions rotated around a center point, like a color wheel). All types support multiple color stops with individual transparency controls.
How do I use the draggable color stops?
Click anywhere on the gradient bar below the preview to add a new color stop at that position. Drag existing stop handles left or right to reposition them. Click a handle to select it and edit its color, position, and opacity in the panel below.
How many color stops can I use in a CSS gradient?
CSS gradients support unlimited color stops. This tool allows up to 10 stops with individual color, position, and opacity controls. More stops create smoother transitions and more complex patterns.
Are CSS gradients supported in all browsers?
Linear and radial gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge) with over 98% global coverage. Conic gradients are supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. This tool generates -webkit- prefixed CSS for older browser compatibility.
Can I use gradients with Tailwind CSS?
Yes. For simple two-color linear gradients at standard angles (0, 45, 90, 135, 180, 225, 270, 315 degrees), this tool generates the equivalent Tailwind utility classes. For more complex gradients, use the CSS output with Tailwind’s arbitrary value syntax.
Can I create transparent gradients?
Yes. Each color stop has an individual opacity slider (0–100%). This lets you create gradients that fade to transparent, overlay effects, or semi-transparent color transitions perfect for glass-like UI elements.
What is a conic gradient?
A conic gradient creates color transitions that rotate around a center point, similar to a color wheel or pie chart. Colors transition along the circumference rather than along a line (linear) or from center outward (radial). They’re great for creating pie charts, color wheels, and unique decorative effects.