Generador de Degradados
Crea hermosos degradados CSS
Configuración
#f97316
#facc15
135°
background: linear-gradient(135deg, #f97316, #facc15);Use these tools directly in Chrome
Install the DailyDevTools extension — access all tools from your browser toolbar
What is Gradient Generator?
CSS gradients let you create smooth color transitions without image files, making designs lighter and infinitely scalable. DailyDevTools' CSS Gradient Generator lets you create linear, radial, and conic gradients with a visual editor — add color stops, adjust angles, change positions — and copies the exact CSS code to paste into your stylesheet. No design software needed.
How to use Gradient Generator
- 1Choose gradient type: Linear (angled), Radial (circular), or Conic (rotating)
- 2Click the gradient bar to add color stops, then click each stop to change its color and opacity
- 3Drag stops along the bar to adjust their position, or set the angle for linear gradients
- 4Click Copy CSS to copy the complete CSS gradient property to your clipboard
Frequently asked questions
What is the difference between linear, radial, and conic gradients?
Linear gradients transition along a straight line at a specified angle. Radial gradients radiate outward from a center point. Conic gradients rotate around a center point like a color wheel or pie chart.
How do I create a transparent gradient?
Set the opacity of a color stop to 0, or use rgba() with an alpha of 0. For example, fading from blue to transparent uses stops: rgba(0,0,255,1) → rgba(0,0,255,0).
Are CSS gradients supported in all browsers?
Yes. CSS gradients are supported in all modern browsers. The generator outputs standard CSS without vendor prefixes, which is all that's needed for Chrome, Firefox, Safari, and Edge.
Comments
También te puede gustar
Explora otras herramientas populares para desarrolladores