Generadores de CSS

CSS que ves antes de escribirlo

Algunas propiedades de CSS son mucho más fáciles de diseñar a ojo que con números. Una sombra que quede bien, un degradado con el ángulo y los puntos adecuados, unas esquinas lo bastante redondas pero no demasiado: se llega probando. Estos generadores te permiten ajustar los valores con deslizadores y colores, ver el efecto en una vista previa y copiar el código terminado, en lugar de editar números y recargar la página.

Sombra de caja

La propiedad box-shadow admite un desplazamiento horizontal, un desplazamiento vertical, un radio de desenfoque, un radio de expansión y un color, además de la palabra opcional inset que pone la sombra por dentro. Las sombras suaves y naturales usan poca opacidad con un desenfoque grande y un pequeño desplazamiento vertical, como si la luz viniera de arriba. Una sombra dura sin desenfoque da un aspecto plano y retro. Usa los ejemplos como punto de partida.

Degradados

Un degradado mezcla dos o más colores. Uno lineal sigue un ángulo, así que 90 grados va de izquierda a derecha y 180 de arriba abajo. Uno radial se extiende desde un punto, y uno cónico gira alrededor de un punto como una rueda de color. Cada color tiene una posición de 0 a 100 por ciento, y puedes añadir un tercer color. El código incluye antes un color de fondo liso, como alternativa para el raro navegador que no entiende los degradados.

Bordes redondeados

La propiedad border-radius redondea las esquinas. Un valor redondea las cuatro por igual, y cuatro valores fijan cada esquina por separado, empezando por arriba a la izquierda y siguiendo las agujas del reloj. Usa píxeles para una curva fija o porcentajes para una forma que escale con el elemento, donde un 50 por ciento en un cuadrado da un círculo.

Efecto cristal

El aspecto de cristal esmerilado, llamado a menudo glassmorphism, combina un fondo translúcido, un desenfoque de lo que hay detrás con backdrop-filter y un borde claro y fino. Necesita algo colorido detrás para verse bien, por eso la vista previa muestra un degradado. Funciona en todos los navegadores modernos, y el código generado incluye la versión con prefijo para Safari antiguo.

Conviene saber

Un desenfoque fuerte y sombras grandes en muchos elementos pueden ralentizar el desplazamiento en dispositivos débiles, así que úsalos con moderación. Comprueba que el texto sobre un panel de cristal mantiene suficiente contraste con nuestro comprobador de contraste. Todo se ejecuta en tu navegador y no hay nada que instalar.