Generadores CSS: Sombras, Radio, Filtros y Efectos de Vidrio Sin Adivinanzas

Una vez pasé unos cuarenta minutos intentando hacer coincidir una sombra de un archivo Figma. El diseñador me había dado un color, un desplazamiento de X e Y, un desenfoque y una extensión, que es todo lo que necesitas, y todavía no pude lograr que se viera bien. La sombra en el navegador era más pesada y plana que la maqueta, y seguí empujando el radio borroso hacia arriba y hacia abajo de esa manera para arreglarlo.

No lo haría, porque la maqueta tenía dos sombras apiladas. Uno oscuro y apretado para el contacto, uno ancho y suave para la luz ambiental. Figma los mostró como capas separadas en un panel que había colapsado. Una vez que los escribí como un par separado por comas, la coincidencia fue instantánea.

Eso es lo que pasa con las propiedades CSS en esta guía. Ninguno de ellos es complicado. Todos ellos tienen uno o dos comportamientos que no son obvios en la sintaxis, y puedes perder una tarde con cualquiera de ellos. Esta guía son esos comportamientos, escritos.

Cada generador vinculado aquí se ejecuta en su navegador, actualiza una vista previa en vivo mientras arrastra y le entrega el CSS. Los construyo en [Toolz.dev](/ y los uso constantemente, principalmente porque leer una taquigrafía de cuatro valores es más difícil que mirar un rectángulo.

TL;Dr: aprovechamiento Sombra de caja pentru adâncime, Sombra de texto para brillo y contornos, Radio fronterizo para esquinas incluidas las elípticas, Filtros CSS para efectos de desenfoque, brillo y color, Vidriomorfismo pentru panele frizate, Neumorfismo para superficies elevadas blandas, Degradados para fondos y el Convertidor de unidades CSS cuando necesitas px en rem. Todos ellos ejecutan el lado del cliente con una vista previa en vivo. Las dos reglas que vale la pena llevar: las sombras reales están en capas y backdrop-filter necesita algo detrás para desdibujarse.

---

¿Qué generador necesito?

tu quieres	Propiedad	herramienta
Una tarjeta que levanta la página	box-shadow	Sombra de caja
Texto resplandeciente, perfilado o en relieve	text-shadow	Sombra de texto
Esquinas redondeadas o en forma de píldora	border-radius	Radio fronterizo
Desenfocar, atenuar, desaturar o teñir un elemento	filter	Filtro CSS
Un panel esmerilado sobre una foto	backdrop-filter	Vidriomorfismo
Un botón suave que parece presionado en la superficie	en capas box-shadow	Neumorfismo
Un fondo de transición de color	linear-gradient	Degradado
Para convertir 24px en rem	ninguno	Convertidor de unidades

El resto de esta guía es lo que hace cada uno y dónde muerde.

¿cómo funciona la sombra de caja?

La taquigrafía es de cinco valores y un color:

box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
/*         │  │    │    │  └ colour                 */
/*         │  │    │    └ spread: grow or shrink    */
/*         │  │    └ blur: 0 is a hard edge         */
/*         │  └ vertical offset                     */
/*         └ horizontal offset                      */

Los desplazamientos mueven la sombra. El desenfoque suaviza su borde, extendiéndolo hacia afuera aproximadamente la mitad del valor del desenfoque en cada dirección. La dispersión crece o reduce la sombra antes de aplicar la desenfoque, y una dispersión negativa es el truco para una sombra que se encuentra escondida debajo de un elemento en lugar de halo.

La parte que la gente extraña: la pila de sombras. Una lista separada por comas representa de atrás hacia adelante, la primera sombra en la parte superior:

box-shadow:
  0 1px 2px rgb(0 0 0 / 0.20),   /* contact: tight, darker */
  0 8px 24px rgb(0 0 0 / 0.12);  /* ambient: wide, lighter */

Esa pareja es la razón por la que la sombra de un diseñador ' se ve mejor que la tuya. Una sombra se lee como una pegatina. Dos se leen como un objeto con peso. El Generador de sombras de caja te permite agregar capas y arrastrar cada una por separado, que es la única forma sensata de ajustarlas.

inset mueve la sombra dentro del cuadro del borde, que es como se obtiene una entrada que parece empotrada, o la mitad interior de una superficie neumórfica.

Una nota de actuación que me ha mordido en proyectos reales: animar box-shadow fuerza a volver a pintar cada cuadro. Si quieres que una carta se levante al pasar el cursor, anima transform y desvanece un segundo elemento que contiene la sombra más grande. El Referencia de sombras de caja MDN documenta la sintaxis en su totalidad.

¿para qué sirve text-shadow además de drop shadows?

Misma idea, un valor menos. text-shadow no tiene propagación:

text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);

Sus usos interesantes no son sombras en absoluto.

Esquemas. Cuatro sombras duras a cero desenfoque, una por diagonal, fingen un trazo alrededor del texto. Es más pesado que -webkit-text-stroke pero funciona en todas partes y se representa fuera del glifo en lugar de dividir la diferencia:

text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
             1px -1px 0 #000, -1px -1px 0 #000;

Resplandor. Desplazamiento cero, gran desenfoque, color saturado, repetido dos o tres veces para aumentar la intensidad.

Legibilidad sobre imágenes. Una sola sombra oscura suave bajo texto blanco te permite contrastar cuando el fondo es una foto que no controlas. No sustituye a una malla adecuada y no ahorrará una proporción de contraste defectuosa, pero evita que los descendentes desaparezcan en una mancha brillante.

Construye los tres en el Generador de sombras de texto. Si está persiguiendo un requisito de contraste en lugar de un efecto, compare el resultado WCAG con el Revisador de contraste de color en lugar de mirarlo fijamente.

¿por qué el radio de borde toma ocho valores?

La mayoría de la gente usa uno. La forma completa son dos grupos de cuatro, separados por una barra:

border-radius: 20px 40px 60px 80px / 40px 20px 80px 60px;
/*             ─────horizontal────   ──────vertical─────  */

Antes de la barra: el radio horizontal de cada esquina, en el sentido de las agujas del reloj desde arriba a la izquierda. Después: el radio vertical. Dale ambos y cada esquina se convierte en una elipse en lugar de un cuarto de círculo. Así es como se obtienen formas de manchas orgánicas sin un SVG.

Dos comportamientos que vale la pena conocer.

Los porcentajes se resuelven en diferentes ejes. Un radio horizontal en % es un porcentaje del elemento 's ancho, el vertical de su altura. Entonces border-radius: 50% en un rectángulo se obtiene una elipse, no un rectángulo redondeado, lo que sorprende a la gente la primera vez.

El navegador escala los radios hacia abajo cuando se superponen. Si dos radios adyacentes suman más que el lado que comparten, todos los radios se reducen proporcionalmente hasta que encajen. No puedes desbordar la forma, por eso border-radius: 9999px produce de forma fiable una pastilla.

los Generador de radio fronterizo expone los ocho valores con controles deslizantes por esquina y emite la taquigrafía válida más corta, que vale la pena tener porque escribir la forma de barra a mano es realmente desagradable.

¿qué pueden hacer los filtros CSS y cuánto cuestan?

filter aplica operaciones gráficas a un elemento y todo lo que contiene:

filter: blur(4px) brightness(1.1) saturate(1.2);

Las funciones se componen de izquierda a derecha y el orden cambia el resultado. Desenfocar y luego iluminar no es lo mismo que iluminar y luego difuminar.

Función	Hace	Estar atento a
blur()	Desenfoque gaussiano	Caro en radios grandes; borrosos bordes hacia afuera
brightness()	Multiplica la ligereza	Los clips anteriores 1 resaltan el blanco
contrast()	Empuja los valores desde el gris medio	Aplasta los detalles rápidamente
grayscale()	Elimina la saturación	Más barato que un activo duplicado
sepia()	Mapa de tonos cálidos	Combinar con hue-rotate() para otros tintes
hue-rotate()	Cambia el tono en ángulo	No preserva la ligereza percibida
drop-shadow()	Sombra que sigue a alfa	A diferencia de box-shadow, sigue la forma real

Esa última fila es la que vale la pena recordar. box-shadow ensombrece el cuadro del borde, por lo que un PNG transparente de un logotipo recibe una sombra rectangular. filter: drop-shadow() rastrea el canal alfa y ensombrece el logotipo.

El costo es real. Los filtros empujan un elemento a su propia capa de composición y blur() en particular, es caro en un área grande. Bien en un botón. Piénselo dos veces en una superposición de página completa en un teléfono de gama baja. MDN's referencia del filtro enumera cada función y su comportamiento de interpolación.

Pruebe combinaciones en el Generador de filtro CSS, que muestra la vista previa y la declaración exacta una al lado de la otra.

¿cómo construyo un panel de morfismo de vidrio que funcione?

El vidrio esmerilado es una propiedad que hace el trabajo:

background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);

backdrop-filter filtra lo que es detrás el elemento más que el elemento en sí. De eso se derivan tres cosas, y representan casi todos los " ¿Por qué mi vaso parece una caja gris &quot? pregunta.

Necesita algo detrás. Sobre un color de fondo plano, un fondo borroso es el mismo color plano. El efecto sólo existe sobre una foto, un degradado o contenido superpuesto.

El fondo debe ser translúcido. Un fondo completamente opaco oculta completamente el fondo borroso. En algún lugar entre el 10% y el 25% de blanco es el rango habitual.

La saturación es lo que lo vende. El vidrio real concentra el color. saturate(180%) junto al desenfoque está la diferencia entre vidrio esmerilado y una mancha.

Agregue el borde fino porque el vidrio tiene un borde y verifique el contraste antes de enviar: el texto sobre una foto borrosa pasa o falla según la foto, y un panel que se lee perfectamente en la imagen de su héroe puede ser ilegible en la siguiente.

los Generador de morfismo de vidrio vistas previas de una imagen real, lo que importa aquí más que cualquier otro efecto en esta guía.

¿vale la pena utilizar el neumorfismo?

El neumorfismo, o interfaz de usuario suave, hace que los elementos parezcan extruidos del fondo en lugar de flotar sobre él. Dos sombras, esquinas opuestas, una más clara que la superficie y otra más oscura:

background: #e0e5ec;
box-shadow: 8px 8px 16px #a3b1c6,
            -8px -8px 16px #ffffff;

Cámbielos por un estado presionado o úselos inset en ambos para una apariencia tallada.

La técnica tiene una restricción estricta: el elemento y su fondo deben ser del mismo color. El efecto son completamente las dos sombras, por lo que un botón neumórfico sobre un fondo diferente deja de leer como extruido y comienza a leer como roto.

También tiene un problema de accesibilidad sobre el que vale la pena ser honesto. Toda la estética contrasta poco con la construcción, y un botón cuya única posibilidad es una sombra suave puede fallar WCAG's requisito de contraste sin texto para componentes interactivos. Si lo usas, dale a los botones un borde real o un estilo de enfoque que no dependa de la sombra.

los Generador de Neumorfismo deriva ambos colores de sombra del color de tu superficie, que es la parte complicada que debes hacer a mano.

¿Cuándo necesito un convertidor unitario?

Más a menudo de lo que piensas, porque las herramientas de diseño hablan px y un buen CSS a menudo no.

rem es relativo al tamaño de fuente raíz, por lo que un diseño en rem escala cuando un usuario cambia el tamaño de texto predeterminado de su navegador &#39. em es relativo al element's tamaño de fuente, lo que lo hace útil para rellenos que deberían rastrear su propio texto y ser traicioneros cuando se compone a través de elementos anidados.

La aritmética es trivial. Hacerlo cuarenta veces mientras se traduce una especificación es donde aparecen errores, especialmente si el tamaño de la raíz no es 16px. El Convertidor de unidades CSS toma una raíz configurable y muestra cada unidad a la vez.

Para gradientes, el Generador de gradiente cubre lineal, radial y cónico, y hay una escritura más larga en el Guía de gradiente CSS.

Juntarlos: una carta, de principio a fin

Las propiedades rara vez se utilizan solas. Aquí hay una tarjeta que usa cuatro de ellos, construida de la manera que yo la construiría.

Comience con la forma y la sombra en reposo:

.card {
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 4px 12px rgb(0 0 0 / 0.08);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

Dos sombras nuevamente, ambas luces. Apenas se debe levantar una carta en reposo. Guarda el drama para el estado de vuelo estacionario.

.card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgb(0 0 0 / 0.08),
    0 12px 28px rgb(0 0 0 / 0.12);
}

los translateY hace la mayor parte del trabajo percibido. El movimiento se lee como una elevación más convincente que una sombra más grande, y es barato porque las transformaciones se componen en lugar de repintarse.

Si la tarjeta se coloca en una foto en lugar de en una página plana, cambie el fondo blanco por vidrio:

.card {
  background: rgb(255 255 255 / 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgb(255 255 255 / 0.25);
}

Tenga en cuenta qué cambió y qué no. El radio y las sombras se mantienen intactos. Sólo difiere el tratamiento superficial, que es el modelo mental útil: la forma y la profundidad son una decisión, la superficie es otra.

¿qué pasa con la compatibilidad con el navegador y las alternativas?

La mayor parte es vieja y segura. box-shadow, text-shadow, border-radius y filter han recibido apoyo en todas partes durante años y puedes escribirlos sin pensarlo dos veces.

backdrop-filter es la excepción que vale la pena manejar. El soporte es amplio ahora, pero es la única propiedad aquí que produce un resultado genuinamente roto cuando falta: un panel con un fondo blanco del 15% y sin desenfoque es una mancha pálida sobre una foto. Guárdalo:

.glass {
  background: rgb(255 255 255 / 0.85);   /* readable fallback */
}

@supports (backdrop-filter: blur(1px)) {
  .glass {
    background: rgb(255 255 255 / 0.15);
    backdrop-filter: blur(12px) saturate(180%);
  }
}

El respaldo es un panel mayoritariamente opaco, que no es el efecto pero se puede utilizar perfectamente. La versión mejorada solo se aplica cuando el navegador puede entregarlo. MDN's @supports alusión cubre la sintaxis y vale la pena buscarla en cualquier momento en que una propiedad tenga un modo de falla visualmente roto en lugar de uno simplemente más simple.

¿Cómo mantengo los efectos consistentes en todo un proyecto?

El modo de falla en una base de código real no es una mala sombra. Son catorce sombras ligeramente diferentes, porque todos los que necesitaban una tarjeta escribían la suya propia.

Defínalos una vez como propiedades personalizadas y usa los nombres:

:root {
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.06),
               0 4px 12px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.08),
               0 12px 28px rgb(0 0 0 / 0.12);
  --radius: 12px;
}

.card { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.card:hover { box-shadow: var(--shadow-lg); }

Por lo general, tres pasos de sombra son suficientes. Si te encuentras agregando un cuarto, a menudo es porque un componente necesita uno diferente elevación en lugar de una sombra diferente, la respuesta es reutilizar un paso existente.

Esto también hace que el modo oscuro sea manejable. Las sombras que funcionan en blanco son casi invisibles en una superficie oscura, donde la profundidad generalmente proviene de un borde más claro o de un brillo sutil. Redefina los tokens dentro de una consulta de medios y cada componente sigue:

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-md: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
  }
}

Genere cada valor una vez con las herramientas anteriores, péguelo en el bloque de tokens y deje de pensar en ello. Ese es el objetivo de tener un generador: no escribir CSS que no se pueda escribir a mano, sino dejar de prestar atención a valores que sólo necesitan decidirse una vez.

Donde estos efectos causan problemas de accesibilidad

Cada propiedad en esta guía manipula el contraste, y el contraste es de lo que se tratan principalmente los requisitos de accesibilidad. Cuatro trampas específicas.

Los componentes interactivos necesitan límites visibles. WCAG 2.2 requiere contraste 3:1 para las partes de un control que lo identifican. Un botón cuyo único borde es una sombra suave puede fallar, que es el problema estructural del neumorfismo y la razón por la que un borde o un anillo de enfoque sólido no es opcional allí.

Los paneles de vidrio heredan su fondo 's problema de contraste. El texto en un panel esmerilado es legible o no dependiendo de la foto detrás, y la foto a menudo cambia. Pruebe con su peor imagen, no con su héroe. Levantar el panel & #39; La opacidad del fondo suele ser una mejor solución que hacer que el texto sea más atrevido.

Los filtros cambian de contraste en silencio. brightness() y contrast() aplicado a un contenedor también se aplica al texto que contiene. A filter: brightness(1.15) en una tarjeta para que explote, puede empujar silenciosamente el texto de su cuerpo por debajo del umbral de 4,5:1. Compruébalo después con el Revisador de contraste de color, nu înainte.

No dejes que una sombra sea el único indicador de estado. Si flotar, enfocar y presionar difieren solo por la profundidad de la sombra, los usuarios de teclado y cualquier persona con baja visión pierden la distinción. Combine el cambio de sombra con una transformación, un contorno o un cambio de color.

Nada de esto inutiliza los efectos. Los hace cosas para verificar en lugar de asumir, lo que lleva aproximadamente un minuto por componente con un verificador de contraste abierto.

¿Estas herramientas envían mi trabajo a alguna parte?

No. Aquí todos los generadores se ejecutan completamente en el navegador. No hay ningún paso de carga ni un servidor de ida y vuelta, por lo que responden instantáneamente mientras arrastras un control deslizante. Esa es la misma razón por la que el resto del catálogo funciona sin conexión, como se trata en el Guía de privacidad de datos.

Errores comunes

• Una sombra en lugar de dos. La diferencia más visible entre una sombra escrita a mano y una diseñada.
• Animando box-shadow sobre flotar. Repinta cada cuadro. Animar transform y en su lugar se desvanece.
• backdrop-filter sobre un color sólido. Nada que desdibujar, así que no pasa nada.
• Fondo opaco sobre un panel de vidrio. Oculta el efecto que acabas de escribir.
• Neumorfismo en un fondo no coincidente. La ilusión depende de que sean idénticos.
• border-radius: 50% esperando un rectángulo redondeado. En un elemento no cuadrado obtienes una elipse.
• Envío de cualquiera de estos sin verificación de contraste. Las sombras y los cristales reducen el contraste y ambos son fáciles de sobreajustar en un buen monitor.

preguntasrán el