Generadores CSS
Design CSS visually and copy the code — build gradients and box-shadows with a live preview, no guesswork.
Acerca de Generadores CSS
Algunas propiedades de CSS son casi imposibles de escribir a ciegas. Los degradados y las sombras de caja son los dos peores casos: la sintaxis empaqueta varios valores en una sola línea, y un pequeño cambio en cualquiera de ellos puede transformar el resultado. Esta categoría tiene dos constructores visuales exactamente para eso: el generador de degradados CSS y el generador de sombra de caja CSS. Ajustas los controles, observas cómo se actualiza una vista previa en vivo, y copias la regla terminada cuando queda bien. Es para desarrolladores front-end, diseñadores y cualquiera que retoque un tema y prefiera ver el resultado en lugar de adivinar los números.
Recurre al generador de degradados siempre que necesites un fondo que sea más que un color plano —una sección hero, un botón, la cabecera de una tarjeta, una superposición que permita que el texto se lea sobre una imagen. Las partes que compensa experimentar son el ángulo y la posición de cada parada de color, ya que mover una parada es lo que convierte una mezcla turbia en una limpia. Usa el generador de sombra de caja para dar profundidad: tarjetas, menús desplegables, ventanas modales y botones que necesitan sentirse elevados. Su lección útil es que el desplazamiento, el desenfoque y la expansión hacen cosas bastante distintas, y las sombras que resultan convincentes suelen ser más suaves y más transparentes de lo que sugiere el instinto —un desenfoque amplio con baja opacidad se lee como luz, mientras que una sombra oscura y dura se lee como una pegatina. Ambas herramientas producen CSS estándar que pegas directamente en una hoja de estilos.
Ambos son gratuitos, no necesitan registro y se ejecutan por completo en tu navegador, así que nada de lo que diseñas se sube y la vista previa es instantánea en lugar de una ida y vuelta. Lo que obtienes es una simple declaración de background o box-shadow para copiar —sin framework, sin dependencia, sin comentario de atribución. Dos cosas que conviene saber: la vista previa muestra cómo renderiza la regla tu propio navegador, así que comprueba otros navegadores para cualquier cosa crítica, y las sombras pesadas o los degradados grandes en muchos elementos pueden costar rendimiento de pintado en dispositivos de gama baja. Para elegir los colores que introduces en un degradado, la categoría de herramientas de color tiene un conversor, un generador de tonos y un verificador de contraste.
Preguntas frecuentes
¿El CSS generado funciona en todos los navegadores?
Los degradados lineales y radiales y la box-shadow son compatibles con todos los navegadores actuales sin prefijos de proveedor. Solo necesitas versiones con prefijo para navegadores genuinamente antiguos, a los que casi ningún proyecto apunta hoy. Si el tuyo lo hace, comprueba el requisito concreto en lugar de darlo por supuesto.
¿Puedo usar estos degradados y sombras en un proyecto comercial?
Sí. La salida es CSS corriente que escribiste usando un editor visual. No hay nada que licenciar, acreditar ni atribuir.
¿Por qué mi sombra se ve distinta en mi sitio que en la vista previa?
Normalmente por el contexto que la rodea. Una sombra se lee distinto contra un fondo de color que contra uno blanco, y puede quedar recortada por un padre con overflow hidden u oculta detrás de un hermano con un orden de apilamiento superior. La regla en sí es la misma.
¿Puedo añadir varias sombras o más de dos colores de degradado?
CSS admite ambas cosas: box-shadow acepta una lista separada por comas, y los degradados aceptan tantas paradas de color como quieras. Superponer dos o tres sombras con desenfoques distintos es como se consigue la profundidad más realista.