Generador de Degradados CSS
Crea degradados CSS lineales y radiales. Elige los colores de forma visual y copia el CSS generado.
background: linear-gradient(135deg, #535beb, #7c3aed);
Cómo usar esta herramienta
- 1
Click the Color 1 swatch and choose your starting color from the native color picker.
- 2
Click the Color 2 swatch and choose the color the gradient fades into.
- 3
Drag the Angle slider from 0 to 360 degrees to set the gradient direction; the live preview updates instantly.
- 4
Copy the generated background: linear-gradient(...) line from the code box into your stylesheet.
¿Qué es el Generador de Degradados CSS?
Los degradados CSS son transiciones de color entre dos o más colores. Los degradados lineales fluyen en una dirección; los radiales emanan desde un punto. Este generador cubre los casos comunes; para degradados complejos de varias paradas con posiciones personalizadas, créalos manualmente.
Casos de uso comunes
Creating a hero section or landing page banner background that fades between two brand colors.
Generating button and card backgrounds with a subtle two-tone diagonal fade.
Producing a gradient overlay placed above a photo to improve text contrast.
Prototyping color direction quickly by dragging the angle slider before committing to final values.
Grabbing a ready-to-paste linear-gradient string for a Tailwind, styled-components, or plain CSS file.
Teaching or demonstrating how gradient angle changes the visual direction of a fade.
Preguntas frecuentes
¿Son eficientes los degradados?▼
¿Puedo animar los degradados?▼
Herramientas relacionadas
Conversor de Color (HEX/RGB/HSL)
Convierte colores entre los formatos HEX, RGB y HSL. Elige un color visualmente o introduce los valores manualmente.
Generador de Box Shadow CSS
Crea valores de box-shadow en CSS de forma visual. Previsualiza en tiempo real y copia el CSS generado.
Generador de Curvas de Aceleración Cubic Bezier
Crea curvas de aceleración cubic-bezier para CSS. Incluye ajustes preestablecidos estándar.
Generador de Paletas de Color
Genera paletas de color armoniosas a partir de cualquier color base. Admite esquemas complementarios, análogos, triádicos y monocromáticos.
Generador de Border Radius CSS
Crea valores complejos de border-radius en CSS de forma visual. Control independiente de cada esquina.
Generador de CSS Clamp()
Genera valores CSS fluidos y responsivos con clamp(). Escala suavemente entre tamaños mínimo y máximo a lo largo de los rangos del viewport.