a11y.skipToMainContent
1

Box Shadow Generator

Construir CSS box-shadow visualmente — sintonizar offset, borroso, diseminado, color, opacidad, e iniciar con vista previa en vivo.

px
px
px
px
%

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Box Shadow Generator

  1. Ajuste los deslizadores para X/Y offset, borroso, diseminado, color, opacidad.
  2. Toggle inset for internal shadows.
  3. Copia el CSS.

¿Cómo se llama?

■p Confesores para cada propiedad de la caja-shadow CSS spec. Una tarjeta de presentación muestra exactamente cómo será tu sombra. Copiar el CSS de una sola línea cuando se hace
Advertisement

FAQ

¿Qué es el radio extendido?
La propagación positiva crece el tamaño de la sombra antes de desenfocar; el negativo lo encoge. Combina la difusión negativa con offset para sombras direccionales limpias.
¿Puedo añadir varias sombras de caja a la vez?
Sí. Añadir tantas capas de sombra como quieras; se combinan en una sola propiedad CSS separada por coma que puedes copiar.
¿Qué hace la casilla de entrada?
Inset dibuja la sombra dentro del elemento en lugar del exterior, creando un efecto visual presionado o hundido en su componente.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Box Shadow Generator on Wikipedia·Developer Tools on Wikipedia·Box Shadow Generator on Britannica

People also use

← Back to Developer Tools · All tags
Advertisement