Generador de sombras CSS

Crea y copia una sombra

1. Edita los desplazamientos horizontal y vertical, el desenfoque, la extensión, el color y la opacidad de cada capa. Elige sombra interior cuando deba aparecer dentro de la caja.
2. Añade, duplica o mueve capas para dar forma al resultado. Mantén entre 1 y 8 capas; un campo incompleto o fuera de los límites de este editor borra el código actual hasta que se corrija.
3. Examina la vista previa con Ajustar o al 100% y copia la declaración. Pégala en una regla CSS para el elemento al que quieras aplicar el estilo.

Entiende cada capa

Los desplazamientos horizontal y vertical positivos mueven una sombra hacia la derecha y hacia abajo. El desenfoque suaviza su borde; con desenfoque cero, el borde queda nítido. La extensión cambia su tamaño, no su suavidad.

La opacidad corresponde al color de cada sombra, no a toda la caja. Una sombra al 50 por ciento permanece exactamente al 50 por ciento en el código; su color no se convierte en un byte alfa redondeado.

La primera capa aparece delante dentro de su categoría de dibujo. Las sombras exteriores permanecen detrás del fondo de la caja, mientras que las interiores quedan por encima de ese fondo y debajo del borde. Mover filas no permite cruzar esas categorías.

Las longitudes admiten punto o coma y hasta dos cifras decimales; la opacidad admite una. Son controles con límites propios del editor, no un analizador de todas las expresiones CSS válidas. El código generado siempre usa puntos decimales.

Experimentos útiles con sombras

El ejemplo inicial combina una pequeña sombra suave con 0, 2, 4, 0 píxeles y una opacidad del 12,5 por ciento con otra más amplia de 0, 8, 16, -4 píxeles al 20 por ciento. Cada fila corresponde a una entrada de código.

Para un efecto nítido parecido a un contorno, usa desplazamientos y desenfoque cero y extensión positiva en una capa exterior. Sigue siendo una sombra, no una propiedad de borde exportada.

Prueba una capa interior con desenfoque cero y un desplazamiento positivo para examinar su borde interior nítido. Cambia el color de la superficie y usa la vista al 100% sin alterar la declaración de la sombra.

Qué muestra la vista previa

Este editor produce entre 1 y 8 capas box-shadow sRGB en píxeles CSS. No importa CSS, genera sombras drop-shadow de filtros, elige un selector ni exporta una hoja de estilos completa o una imagen.

El tamaño de la caja, los colores opacos y el radio de las esquinas de la vista previa solo proporcionan contexto. La geometría y el fondo de tu elemento pueden cambiar el aspecto de la misma declaración.

Ajustar escala toda la vista previa. Usa la vista desplazable al 100% para examinarla más de cerca. El espacio de vista previa es limitado y puede recortar los extremos del desenfoque; los navegadores y las pantallas no tienen por qué dibujar píxeles idénticos.

Una sombra transparente o colapsada puede ser válida pero invisible. Si este navegador no puede mostrar la declaración actual, la herramienta lo indica en lugar de sustituirla por otro efecto; el código válido sigue disponible para copiar.

Tu sombra permanece en la página

La edición de sombras y la generación de código se realizan localmente sin subir ni guardar tus valores. Solo se copia cuando tú lo eliges. La política general de privacidad del sitio sigue siendo aplicable.