6XC

Generador de Sombra CSS (Box Shadow)

Diseña una box-shadow de forma visual — desplazamientos, desenfoque, expansión, color, opacidad e inset — con vista previa en vivo.

814 visitas

La propiedad box-shadow

Sintaxis: box-shadow: x y desenfoque expansión color. Los desplazamientos mueven la sombra, el desenfoque suaviza su borde, la expansión la agranda o encoge, y el color suele llevar alfa (por ejemplo rgba(0,0,0,0.15)) para dar realismo. Añade inset para dibujar la sombra dentro de la caja. Las sombras suaves y de baja opacidad con un pequeño desplazamiento en y son las que se ven más naturales.

Preguntas Frecuentes

¿Cuál es la diferencia entre desenfoque y expansión?

El desenfoque suaviza el borde de la sombra sin cambiar su tamaño; la expansión agranda (o con valores negativos encoge) la sombra en todas direcciones antes de aplicar el desenfoque.

¿Cómo consigo una sombra elegante y moderna?

Mantén x en 0, y pequeño (2-8px), desenfoque generoso (10-30px) y opacidad baja (0.08-0.2). Superponer dos sombras — una ajustada y otra amplia — añade profundidad.

Herramientas Similares

Generador de Gradientes CSS Diseña gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el código. Generar Generador de Border Radius CSS Redondea cada esquina por separado o todas a la vez, en px o %, con vista previa en vivo y CSS copiable. Generar Generador de Sombra de Texto CSS Diseña un text-shadow con desplazamientos, desenfoque, color y opacidad — vista previa en vivo sobre texto de muestra. Generar Generador de Bordes CSS Diseña un borde de forma visual — grosor, estilo (solid, dashed, dotted, double…), color y radio — con vista previa en vivo. Generar