Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Generador de sombras CSS

CSS Box Shadow Generator

Ajusta desplazamiento, desenfoque, propagación, color y opacidad con vista previa en vivo —también en modo interior— y copia el box-shadow exacto.

Ruta de la tarea / de la entrada al resultado

Posiciona la sombra

Funciona en local · No se sube nada

Cómo funciona Generador de sombras CSS, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo construir una sombra CSS box-shadow

  1. 01

    Posiciona la sombra

    Define Desplazamiento horizontal y Desplazamiento vertical, cada uno de -80 a 80 px. Los valores negativos empujan la sombra a la izquierda o hacia arriba; cero la centra detrás de la tarjeta. El espacio de trabajo abre con 12 px a la derecha y 18 px hacia abajo, una colocación clásica de sombra proyectada.

  2. 02

    Ajusta desenfoque y propagación

    Ajusta Radio de desenfoque de 0 a 120 px para la suavidad — el valor por defecto es 32 px — y Radio de propagación de -40 a 60 px para agrandar o encoger la sombra antes de aplicar el desenfoque. La propagación por defecto de -4 px tensa ligeramente la sombra para un borde más nítido.

  3. 03

    Define el color y la opacidad

    Elige un Color de la sombra de seis dígitos — el #0b0d12 por defecto es un casi negro — y define Opacidad de la sombra de 0 a 1 en pasos de 0,01. La opacidad se convierte en el canal alfa del color rgba() del resultado, así que 0,28 se renderiza como rgba(11, 13, 18, 0.28).

  4. 04

    Activa el modo interior

    Activa Sombra interior para mover la sombra dentro de la caja, lo que se lee como una superficie pulsada o hundida: útil para campos de entrada y botones conmutados. La declaración generada antepone la palabra clave inset cuando el conmutador está activado.

  5. 05

    Compara con el ejemplo

    Pulsa Cargar ejemplo para un estilo de referencia nítido: un desplazamiento de 8 px en ambos ejes sin desenfoque ni propagación, en #0f4cff al 0,35 de opacidad: un contorno desplazado de borde duro. Restablecer devuelve la sombra suave por defecto, y la vista previa en vivo se vuelve a renderizar con cada cambio.

  6. 06

    Copia o descarga el CSS

    Pulsa Copiar CSS para copiar la regla .shadow-card, o Descargar .css para guardarla como toolars-box-shadow.css. La copia queda bloqueada mientras algún valor esté fuera de rango, así que la declaración que pegas siempre es válida.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Generador de sombras CSS usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Qué hace Generador de sombras CSS en realidad

La elevación es fácil de sentir y difícil de adivinar: una tarjeta de precios que debería flotar justo sobre la página, un modal que necesita profundidad real, un botón pulsado que se lee como interior. Escribir desplazamientos, desenfoque y propagación a ciegas significa recargar la página con cada retoque. Generador de sombras CSS muestra el resultado exacto mientras arrastras cada control deslizante, desde una elevación sutil al 0,28 de opacidad hasta un contorno desplazado duro. La declaración copiada entra directamente en una hoja de estilos: todo se calcula localmente en la pestaña.

Preguntas frecuentes

¿A qué valores del CSS corresponden los controles?
El resultado sigue el orden de box-shadow: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de propagación y luego el color. Opacidad de la sombra se convierte en el canal alfa de un color rgba(), y el conmutador Sombra interior antepone la palabra clave inset a todo el valor.
¿Qué hace un radio de propagación negativo?
Encoge la sombra por todos los lados antes de aplicar el desenfoque, lo que evita que un desenfoque grande se desborde demasiado más allá de los bordes del elemento. La propagación por defecto de -4 px es exactamente ese truco: un desenfoque suave de 32 px que aun así abraza la tarjeta en lugar de extenderse hacia fuera.
¿Puedo apilar varias sombras en una sola pasada?
Este espacio de trabajo ajusta una sombra cada vez para que cada valor permanezca explícito. Para superponer varias sombras, copia la declaración, cambia los valores y copia de nuevo: CSS acepta una lista de sombras separadas por comas en una misma propiedad, y una sombra ambiental suave más una sombra de contacto ajustada es una combinación habitual.
¿Cuándo conviene usar una sombra interior?
Una sombra interior se renderiza dentro del borde del elemento, así que la superficie parece hundida o empotrada en lugar de elevada. Conviene a campos de texto, huecos y botones activados. Activa Sombra interior y la vista previa muestra el efecto al instante: la regla copiada simplemente gana la palabra clave inset.
¿Cuáles son los rangos de valores?
Desplazamiento horizontal y Desplazamiento vertical van de -80 a 80 px, Radio de desenfoque de 0 a 120 px, Radio de propagación de -40 a 60 px y Opacidad de la sombra de 0 a 1. Los valores fuera de rango se marcan con REVISA LOS VALORES y bloquean la copia hasta corregirlos.
¿Se sube o se guarda algo?
No. Todo se renderiza en esta pestaña del navegador a partir de valores de estilo validados, y ningún valor generado entra en almacenamiento, registros, analítica ni la red.

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Crear

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Crear

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear