Crea cajas con sombras multidimensionales y efectos de vidrio esmerilado con copia rápida de reglas CSS.
Crea cajas con sombras multidimensionales y efectos de vidrio esmerilado con copia rápida de reglas CSS. Úsala para trabajo diario, desarrollo, aprendizaje o comprobaciones rápidas.
Esta herramienta funciona en tu navegador. Antes de usar datos sensibles, comprueba que confías en tu dispositivo y navegador.
Esta herramienta te permite diseñar sombras CSS y efectos de vidrio esmerilado con controles deslizantes, verlos en directo sobre una tarjeta y copiar el CSS listo para pegar en tu proyecto. En la pestaña Box Shadow, cada capa tiene desplazamiento horizontal y vertical (de -50 a 50 px), radio de desenfoque (de 0 a 100 px), radio de expansión (de -30 a 50 px), color con opacidad y una casilla Inset para sombras interiores. La salida por defecto es box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.30); con los colores en formato rgba.
Con el botón para añadir capas puedes apilar varias sombras; se unen con comas y la primera de la lista se pinta encima. Las sombras realistas suelen combinar una capa cercana y nítida con otra lejana y suave. La plantilla 3D Double, por ejemplo, mezcla 0 5px 5px y 0 20px 25px en negro de baja opacidad, lo que resulta más natural que una sola sombra grande. Una expansión negativa hace la sombra más pequeña que el elemento, un truco habitual para sombras suaves bajo tarjetas, y la plantilla Glow Light usa un color de marca, desplazamiento cero y mucho desenfoque para crear un brillo.
La pestaña Glassmorphism crea tarjetas de vidrio esmerilado: ajusta el desenfoque del fondo (backdrop-filter: blur, de 0 a 40 px), el color de fondo y su opacidad, y el color y la opacidad de un borde de 1 px. El CSS generado incluye backdrop-filter y el prefijo -webkit-backdrop-filter que necesita Safari. La clave del efecto es un fondo semitransparente con algo detrás; sobre un color plano no hay nada que desenfocar, por eso la vista previa permite alternar entre fondos degradados y oscuros.
Algunos consejos prácticos: aplicar backdrop-filter a superficies grandes puede pesar en móviles modestos, así que úsalo en pocas tarjetas o en la barra de navegación. Vigila el contraste del texto sobre fondos translúcidos; si la opacidad es baja, oscurece el tono o usa un peso de fuente mayor. Los valores rgba funcionan tal cual con variables CSS o con los valores arbitrarios de Tailwind. Todo se ejecuta en tu navegador, sin registro.
box-shadow admite una lista separada por comas: la primera sombra se pinta encima y cada una de las siguientes queda debajo. Si colocas primero una sombra pequeña y nítida y después otra más grande y tenue, obtienes una profundidad convincente. En la herramienta, Layer #1 es la capa superior.
Con Inset marcado, la sombra se dibuja dentro del elemento. Es útil para campos de texto hundidos, botones en estado pulsado o un brillo sutil en el borde superior de una tarjeta de vidrio; la plantilla Glass Inner usa precisamente una sombra interior blanca y tenue.
backdrop-filter desenfoca lo que hay detrás del elemento, así que el color de fondo debe ser semitransparente (opacidad menor que 1) y detrás tiene que haber una imagen, un degradado u otro contenido. Sobre un fondo sólido apenas se nota. Asegúrate también de conservar -webkit-backdrop-filter para Safari.
Las versiones actuales de Chrome, Edge, Firefox y Safari lo admiten; Safari necesita el prefijo -webkit-, que el CSS generado ya incluye. Si tienes que dar soporte a navegadores muy antiguos, añade un color de fondo más opaco como alternativa.
Ver esta categoría: Diseño y color
Evalúa ratios de contraste entre fondo y texto con calificaciones AA/AAA y simulador de daltonismo.
Genera partículas, cuerpos elásticos, colisiones y campos de gravedad interactivos en tiempo real con Canvas.
Coloca puntos de anclaje, arrastra las manillas Bézier en un lienzo de 500×500 y obtén al instante el atributo d del trazado SVG y una regla CSS clip-path: path().
Coloca capturas de pantalla dentro de un elegante marco de navegador estilo macOS con sombra y fondo degradado, y descárgalas en PNG de alta resolución.
