☁️

css-box-shadow-generator,

Generador de CSS box-shadow

Genere sombras CSS avanzadas (box-shadow) con una interfaz de usuario intuitiva.
Una herramienta gratuita que admite múltiples capas y las últimas tendencias de diseño.

🥞

Multicapa

Apila múltiples sombras para expresiones ricas

🎨

Preajustes incluidos

Aplicar al instante Neumorfismo, etc.

⚡

Soporte Tailwind

Soporta tanto CSS estándar como salida Tailwind

Configuración de capas

Parámetros de sombra

Desplazamiento X (px) 0px

Desplazamiento Y (px) 4px

Desenfoque (px) 12px

Propagación (px) 0px

Color de sombra

Opacidad (%) 10%

Sombra interior (inset)

Vista previa

BOX

Width

120px

Height

120px

Border Radius

12px

Color de fondo

Color de la caja

Acerca de

El Generador de CSS box-shadow es una herramienta gratuita que crea estilos de sombra esenciales (box-shadow) para el diseño web con una interfaz de usuario intuitiva.

No solo se pueden crear sombras simples, sino también sombras ricas con múltiples capas, sombras suaves como las que usan Apple y los servicios web modernos, Neumorfismo 3D y Neo Brutalismo plano al instante desde preajustes.

El código generado se puede generar en tres formatos: propiedades CSS estándar, variables CSS (propiedades personalizadas) y clases de utilidad de Tailwind CSS (admite valores arbitrarios), y se puede copiar con un solo clic.

Cómo usar

1 Elegir una base

Elija un preajuste superior que se acerque a la imagen que desea crear. Por supuesto, también puede construir desde cero añadiendo capas.

2 Ajustar sombras

Ajuste los desplazamientos X/Y (posición), la fuerza de desenfoque, la propagación, el color y la opacidad. Al apilar múltiples sombras con "Añadir capa", puede crear sombras más naturales y lujosas.

3 Copiar código

Seleccione "CSS" o "Tailwind" en el panel de salida según su entorno, y pulse el botón del portapapeles para copiar el código.

Propiedades

Sintaxis y propiedades de box-shadow


box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y: La posición horizontal y vertical de la sombra. Los valores positivos mueven la sombra a la derecha/abajo, los valores negativos la mueven a la izquierda/arriba.
blur-radius (desenfoque): La borrosidad de la sombra. Cuanto mayor sea el valor, más ancha y clara se propagará la sombra. En 0, se convierte en un límite nítido (sombra sólida).
spread-radius (propagación): Expande o reduce el tamaño de la sombra misma. Los valores positivos dan como resultado una sombra más grande que el elemento, los valores negativos dan como resultado una sombra más pequeña.
inset (sombra interior): Cuando se especifica esta palabra clave, la sombra cae dentro del elemento en lugar de afuera. Se utiliza para expresar interfaces de usuario con sangría.

Preguntas frecuentes

Q. ¿Afecta box-shadow al rendimiento?

A.Las sombras grandes y borrosas y las múltiples capas son costosas de dibujar, por lo que el renderizado puede volverse lento en los dispositivos móviles. Se necesita especial cuidado al animar box-shadow.

Q. ¿Cuál es la diferencia entre box-shadow y filter: drop-shadow?

A.box-shadow aplica una sombra a la caja (rectángulo) del elemento. Por otro lado, filter: drop-shadow() genera una sombra para la forma opaca del elemento (como el contorno de un PNG transparente).

Q. ¿En qué expresiones se usa inset?

A.Se utiliza para el estado presionado de los botones (efecto de hendidura), las sombras interiores de los campos de texto, el dibujo de luces en Neumorfismo, etc.

Q. ¿Cuáles son los beneficios de apilar múltiples sombras?

A.Apilar múltiples capas puede expresar una profundidad más natural y realista que una sola sombra borrosa. Por ejemplo, apilar una sombra cercana (pequeña y oscura) y una sombra lejana (grande y clara) es una técnica común.

Casos de uso

Interfaces de tarjeta y modales

Hace que los elementos destaquen del fondo, transmitiendo visualmente al usuario que son elementos en los que se puede hacer clic o contenido importante.

Estados de botones hover/active

Al propagar la sombra al pasar el ratón o cambiar a `inset` al hacer clic, puede implementar un botón interactivo con una sensación de presión.

Diseño Neumorfismo

Al colocar una sombra clara y una sombra oscura en diagonal sobre un elemento del mismo color que el fondo, se crea una textura que hace que el elemento parezca sobresaliente o hendido.

Efecto de resplandor

Al establecer el desplazamiento en 0 y propagarlo con colores vivos, puede lograr un efecto como si el elemento estuviera emitiendo luz utilizando solo CSS.