Genere un valor box-shadow de CSS

Cree un valor box-shadow de CSS listo para copiar a partir de cinco datos explícitos, sin tener que componer la sintaxis a mano. Indique los desplazamientos horizontal y vertical, el radio de desenfoque, el radio de extensión y cualquier color admitido por CSS. El generador valida los campos numéricos, rechaza valores negativos de desenfoque o extensión y devuelve una sombra con formato uniforme y unidades de píxel. Resulta útil para diseño interactivo, flujos de tokens de diseño, generadores de componentes y pruebas que necesitan obtener siempre la misma salida para una entrada determinada.

Defina la posición con los desplazamientos horizontal y vertical

Ambos valores se expresan en píxeles CSS en el resultado generado. Un desplazamiento horizontal positivo mueve la sombra hacia la derecha, mientras que uno negativo la lleva hacia la izquierda. Un desplazamiento vertical positivo la mueve hacia abajo y uno negativo, hacia arriba.

El valor cero mantiene la sombra centrada en ese eje. Estos campos pueden contener decimales cuando un sistema de diseño emplea espaciado fraccionario, y el generador conserva el número validado sin redondearlo silenciosamente. Al elegir los desplazamientos, tenga en cuenta la fuente de luz aparente: una luz situada arriba y a la izquierda suele producir una sombra abajo y a la derecha.

Los desplazamientos pequeños suelen transmitir cercanía y sutileza; los grandes pueden hacer que un elemento parezca elevado o tenga un estilo gráfico deliberado. La herramienta no deduce la dirección a partir del desenfoque, el color ni el tipo de componente. Así, usted mantiene el control y puede reproducir los valores con exactitud en hojas de estilo y compilaciones.

Controle la suavidad y el tamaño con desenfoque y extensión

El radio de desenfoque controla la transición gradual entre la zona más intensa de la sombra y la transparencia. Un valor cero crea un borde duro; los valores mayores producen una sombra más suave y visualmente más amplia. El radio de extensión expande la forma de la sombra antes de aplicar el desenfoque.

El cero respeta la huella original del elemento y un valor positivo la amplía hacia todos los lados. Introduzca cada valor como un número sin unidades; el CSS devuelto añade px en el orden requerido. Desenfoque y extensión son controles distintos, de modo que aumentar uno no sustituye al otro.

Para una sombra discreta de interfaz, combine un desplazamiento moderado con un desenfoque medio y poca o ninguna extensión. Para un anillo de enfoque marcado o un efecto de cartel, un desenfoque cero y una extensión mayor pueden crear un contorno nítido. Previsualice el resultado sobre la superficie real, ya que la percepción de suavidad cambia con el contraste y los colores circundantes.

Elija un color y aplique el valor generado

El campo de color acepta un único valor CSS no vacío, como un nombre de color, una notación hexadecimal o una función como rgb() o hsl(). La transparencia alfa suele ser importante para conseguir sombras naturales: un color oscuro opaco puede resultar pesado sobre superficies claras y apagado sobre fondos de color. El generador elimina espacios innecesarios alrededor del valor, comprueba que los paréntesis estén equilibrados y rechaza caracteres capaces de romper una declaración.

Asigne ese valor a la propiedad box-shadow, colóquelo en una propiedad personalizada o guárdelo como token de diseño. La respuesta es un valor, no una declaración completa; su aplicación decide el selector y si lo combina con otras capas de sombra. Si necesita varias, genere y revise cada una por separado antes de unir los valores con comas.

La ejecución es determinista y no depende de red, modelo, aleatoriedad, almacenamiento ni reloj, por lo que sirve para instantáneas y automatizaciones de compilación repetibles.