Generador accesible de degradados y contraste CSS

Crea degradados y sombras accesibles con comprobación de contraste WCAG 2.1 en vivo

Degradado
135°
Efecto
Sombra de caja
0px
12px
30px
-8px
30%
Contenido de la tarjeta

Tu diseño accesible

El texto sobre un degradado solo es legible si el contraste es suficiente: esta herramienta lo comprueba por ti en tiempo real.

Comprobación de contraste WCAG
Peor caso a lo largo del degradado – AA grande 3:1, AA 4.5:1, AAA 7:1.
Salida CSS

                
            

        


        
        

            

            
La comprobación de contraste usa el peor caso sobre el degradado: el mínimo de todos los puntos muestreados. Asegúrate de que el título (texto grande, 3:1), el cuerpo (4.5:1) y el texto del botón cumplan al menos AA.

        


        
        

            

            
¿Necesitas solo un color o una conversión HEX/RGB/HSL? Usa nuestro selector y conversor de color.

        


        
        

            
 Generador de degradados CSS accesible con comprobador de contraste WCAG

            
Crea degradados CSS bonitos que de verdad se puedan leer. El generador de degradados accesible combina un degradado lineal (dos colores y ángulo), una sombra de caja y una comprobación de contraste WCAG 2.1 en vivo para que tu diseño cumpla los estándares AA y AAA.


            
¿Cómo funciona el contraste WCAG sobre un degradado?

            
WCAG 2.1 mide el contraste como la relación entre el color del texto y el del fondo. Como el fondo cambia a lo largo del degradado, esta herramienta comprueba el color del texto contra el peor caso y avisa de inmediato si no se alcanza AA o AAA.


            
Degradado de texto y degradado malla

            
Además del degradado lineal clásico puedes crear un degradado de texto (recortado en el título con background-clip: text) y un degradado malla con degradados radiales en capas, copiable directamente como CSS o clases Tailwind.


            
Salida del generador de degradados Tailwind

            
Cambia la salida a Tailwind y copia clases listas para usar como bg-gradient-to-br from-[#2563eb] to-[#7c3aed] y valores de sombra arbitrarios directamente en tu código.

        


        

            
 Preguntas frecuentes

            

                

                    
¿Qué significan WCAG AA y AAA?

                    
AA exige un contraste de al menos 4.5:1 para texto normal (3:1 para texto grande); AAA exige 7:1 (4.5:1 para texto grande). Esta herramienta comprueba todos los textos de la vista previa en tiempo real contra estos umbrales.

                

                

                    
¿Cómo se calcula el contraste sobre un degradado?

                    
El fondo varía a lo largo del degradado, así que la herramienta muestrea varios puntos entre los dos colores e informa del peor caso, el contraste más bajo que puede aparecer en cualquier lugar del degradado. Si ese punto cumple, todo el degradado es seguro.

                

                

                    
¿La herramienta es realmente gratuita?

                    
Sí. El generador de degradados CSS es 100% gratuito, se ejecuta por completo en tu navegador y no envía datos a ningún servidor.

                

                

                    
¿Puedo usar el CSS generado en proyectos Tailwind?

                    
Sí. Cambia el formato de salida a Tailwind para copiar clases listas de degradado, sombra y color de texto (incluidos valores arbitrarios para ángulos, colores y sombras personalizados).

                

                

                    
¿Puedo incrustar esta herramienta en mi sitio web?

                    
¡Sí, por supuesto! Puedes incrustar el Generador de degradados CSS gratis en tu propio sitio web, simplemente mediante un iframe. En la página de widgets embebidos encontrarás el código de inserción listo y podrás personalizar colores y estilo.