Generador de degradados CSS
Crea degradados CSS lineales, radiales y cónicos con vista previa, paradas de color y ángulo. Generador de degradados CSS gratis online; copia el código.
What next?
¿Te ha sido útil? Comparte Generador de degradados CSS
Gratis, sin registro, funciona en el navegador: envíasela a un amigo o añádela a tu sitio.
Herramientas relacionadas
- Selector de colorElige un color con este selector de color gratis online y convierte HEX a RGB, HSL, HSV y CMYK. Con cuentagotas de imagen, tonos y contraste WCAG.
- Simulador de daltonismoMira las imágenes como las ven las personas daltónicas: simula deuteranopía, protanopía, tritanopía y acromatopsia en línea gratis, con gravedad ajustable.
- Generador de colores aleatoriosGenera colores aleatorios con este generador de colores aleatorios gratis online: pastel, vivos, oscuros, cálidos o fríos, con códigos HEX, RGB y HSL.
- Traductor binarioTraduce texto a binario y binario a texto con este traductor binario en línea gratuito, y convierte números entre binario, decimal, hexadecimal y octal.
- Comparador de diferenciasCompara dos textos online gratis y resalta cada diferencia por línea, palabra o carácter. Comparador de diferencias con opción de ignorar mayúsculas.
- Generar código QRCrea y genera QR online gratis para URL, texto, WiFi, correo, teléfono y SMS. Sin registro, códigos que no caducan y descarga en PNG o SVG.
Forma parte de estos kits
Cómo usar Generador de degradados CSS
- 1Elige Lineal, Radial o Cónico y ajusta el ángulo o la forma
- 2Elige colores con el selector o escribe códigos hex, arrastra la posición de cada parada, añade hasta 8 colores o parte de un preajuste o Aleatorio
- 3Pulsa Copiar CSS para pegar la regla de fondo (con un color sólido de respaldo) en tu hoja de estilos
Preguntas frecuentes
¿Cómo hago un fondo degradado en CSS?▾
Usa la propiedad background con una función de degradado, p. ej. background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. El ángulo define la dirección y cada color puede tener una posición de parada.
¿Cuál es la diferencia entre degradados lineales, radiales y cónicos?▾
Los degradados lineales se mezclan a lo largo de una línea recta con un ángulo, los radiales se extienden hacia afuera desde un punto central y los cónicos barren los colores alrededor del centro como una rueda de color o un gráfico circular.
¿Qué significa el ángulo en linear-gradient?▾
0deg apunta hacia arriba (de abajo a arriba), 90deg va de izquierda a derecha, 180deg de arriba abajo y 135deg va en diagonal de la esquina superior izquierda a la inferior derecha.
¿Los degradados CSS funcionan en todos los navegadores?▾
Los degradados lineales y radiales funcionan en todos los navegadores modernos sin prefijos. Los degradados cónicos son compatibles con todos los navegadores actuales desde 2020. El código generado añade primero un color sólido como alternativa.
¿Puedo usar un degradado en el texto?▾
Sí: define el degradado como background y añade background-clip: text; -webkit-background-clip: text; y color: transparent; al elemento de texto.
Embed Generador de degradados CSS on your website▾
Paste this snippet into your page. The embedded tool runs in your visitor's browser and shows a small “Powered by clkr.work” link.