Toolipedia Insertar
ES
← Todas las herramientas de texto

Generador de sombras de caja CSS

Diseña sombras de caja con controles deslizantes y vista previa en vivo, y copia el CSS.

  • Gratis
  • Sin registro
  • Funciona en cualquier dispositivo

Acerca de Generador de sombras de caja CSS

Ajusta el desplazamiento, el desenfoque, la expansión, el color y la opacidad en una vista previa en vivo y copia la declaración box-shadow. Los valores son desplazamiento x, desplazamiento y, radio de desenfoque, radio de expansión y color, en ese orden. Añade inset para dibujar la sombra dentro de la caja, y mantén la opacidad baja para obtener resultados naturales.

Cómo usar Generador de sombras de caja CSS

  1. Mueve los controles de desplazamiento, desenfoque, extensión y opacidad.
  2. Elige el color de la sombra y observa la vista previa en vivo.
  3. Copia el CSS de box-shadow en tu hoja de estilos.

¿Por qué usar esta herramienta?

También conocida como

Preguntas frecuentes

¿Qué hace el valor spread en box-shadow?

El spread hace crecer o reducir la sombra antes de aplicar el desenfoque. Un número positivo la hace mayor que la caja y uno negativo la hace menor, lo que es bueno para sombras solo en un lado.

¿Cómo añado más de una sombra?

CSS permite varias sombras separadas por comas. Construye cada una y luego combínalas en una sola línea de box-shadow para obtener una profundidad más suave y realista.

¿Qué hace la opción inset?

Inset dibuja la sombra dentro de la caja en lugar de fuera. Es útil para botones pulsados, campos de entrada y paneles hundidos.

¿Es gratis Generador de sombras de caja CSS?

Sí. Generador de sombras de caja CSS de Toolipedia es de uso gratuito, sin registro y sin marca de agua.

¿Es seguro usarlo?

Sí. Todo se calcula en tu navegador y nada de lo que introduces se envía a nuestro servidor.

¿Funciona en mi teléfono?

Sí. Funciona en cualquier navegador moderno en Android y iPhone, y también en tabletas y computadoras. No hay que instalar nada.

¿Necesito una cuenta?

No. Solo abre la página y usa la herramienta. No hace falta registrarse ni dar un correo electrónico.

¿Puedo poner Generador de sombras de caja CSS en mi propio sitio web?

Sí. Usa el botón «Insertar en tu sitio» debajo de la herramienta para copiar un fragmento corto de código y pegarlo en tu página. Es gratis, no necesita cuenta y la herramienta sigue funcionando dentro de tu página.

Herramientas relacionadas