Herramientas · CSS · Crear una sombra CSS

Crear una sombra CSS

Crea una sombra CSS de varias capas (box-shadow) con vista previa en vivo, y copia el código.

Suelta un archivo aquí, o elige uno.

Funciona por completo en tu navegador. No se sube ningún archivo.

Cómo funciona

  1. Empieza con un preajuste, o ajusta tú mismo el desplazamiento, el desenfoque, la expansión y el color de una capa.

  2. Añade más capas para dar profundidad (hasta 4 en total), o elimina cualquiera de ellas.

  3. Copia el CSS box-shadow terminado.

Preguntas frecuentes

Sí, hasta cuatro capas. Se muestran en el orden en que las añades, que es también el orden en que CSS las aplica, así que la primera capa queda más cerca del elemento.

El desplazamiento horizontal y vertical mueve la sombra. El desenfoque suaviza su borde. La expansión agranda o reduce la sombra antes de aplicar el desenfoque.

Dibuja la sombra dentro del borde del elemento en lugar de fuera, para un aspecto hundido.

No. Todo ocurre en tu navegador, y no se envía nada a ningún sitio.

Comentarios

  1. Aún no hay comentarios. Sé el primero en compartir tu experiencia.
Tu valoración (opcional)

Ninguna valoración seleccionada