Guía práctica para usar el CSS Shadow Generator (y crear sombras que realmente destaquen)
¿Te ha pasado que ves una tarjeta, un botón o una sección en una web y piensas: “Esa sombra se ve increíble… pero no tengo idea de cómo hacerla”?
No eres el único. La propiedad box-shadow puede parecer simple, pero cuando empiezas a mover números sin referencia, todo se vuelve ensayo y error.
Justamente para eso está este CSS Shadow Generator: una herramienta visual que te permite crear sombras personalizadas en tiempo real, ver el resultado al instante y copiar el código listo para pegar en tu proyecto. Sin adivinar valores. Sin frustración.
Vamos a verlo paso a paso.
¿Qué es exactamente esta herramienta?
Es un generador visual de la propiedad box-shadow en CSS.
En palabras más directas: ajustas parámetros con controles deslizantes, eliges color y opacidad, y ves cómo cambia la sombra en una caja de ejemplo. Abajo, automáticamente, aparece el código CSS final.
Lo que antes implicaba abrir DevTools, escribir números, probar, borrar y volver a intentar… ahora lo haces en segundos.
Cómo está organizada la interfaz
La herramienta está dividida en dos partes muy claras:
1. Panel izquierdo: los controles
Aquí es donde configuras la sombra. Puedes modificar:
- Sombra interior (Inset)
- Desplazamiento X
- Desplazamiento Y
- Desenfoque
- Expansión
- Color
- Opacidad
Cada ajuste se refleja en tiempo real. Mueves un control y ves el cambio inmediatamente. Así de simple.
2. Panel derecho: vista previa y código
En esta sección ocurre la magia:
- Ves una caja blanca con la sombra aplicada.
- Debajo aparece el código CSS generado automáticamente.
- Tienes un botón “Copiar” para llevar el código al portapapeles con un solo clic.
No hay que seleccionar texto ni hacer nada raro. Presionas y listo.
Cómo usar cada control (explicado sin tecnicismos innecesarios)
Vamos uno por uno. Porque sí, cada parámetro cambia bastante el resultado final.
Sombra Interior (Inset)
Al activar esta opción, la sombra pasa de estar por fuera a estar dentro del elemento.
¿Para qué sirve?
- Botones que parecen presionados
- Estilo neumorfismo
- Campos de formulario con profundidad interna
- Efectos de relieve invertido
Si la casilla está desactivada, la sombra será externa (la más común en tarjetas y contenedores).
Desplazamiento X
Controla el movimiento horizontal de la sombra.
- Valores positivos: la sombra se mueve a la derecha.
- Valores negativos: la sombra se mueve a la izquierda.
Ejemplo práctico:
Si quieres simular que la luz viene desde la izquierda, puedes mover la sombra ligeramente hacia la derecha (valor positivo).
Pequeños ajustes aquí cambian totalmente la percepción de profundidad.
Desplazamiento Y
Este mueve la sombra verticalmente.
- Positivo: hacia abajo.
- Negativo: hacia arriba.
La mayoría de diseños modernos usan valores positivos en Y, porque simulan una sombra natural que cae hacia abajo.
Un ejemplo muy común:
- X: 0px
- Y: 10px
Ese simple ajuste ya genera un efecto elegante.
Desenfoque (Blur)
Aquí defines qué tan suave o marcada es la sombra.
- 0px: sombra dura y definida.
- Valores altos: sombra más difusa y sutil.
Si buscas un diseño moderno y minimalista, aumenta el desenfoque.
Si quieres algo más fuerte o más gráfico, redúcelo.
Este parámetro suele ser clave para que la sombra se vea profesional.
Expansión (Spread)
Controla el tamaño base de la sombra.
- Valores positivos: la sombra crece.
- Valores negativos: se contrae.
No siempre es necesario tocarlo, pero es muy útil para efectos especiales, como halos suaves o sombras más marcadas alrededor del elemento.
Es uno de esos ajustes que no usas todo el tiempo… pero cuando lo necesitas, es imprescindible.
Color
Puedes elegir cualquier color, no solo negro.
Muchos diseños actuales utilizan:
- Gris muy suave
- Tonos del mismo color del elemento
- Azules oscuros con baja opacidad
Por ejemplo, un botón azul puede verse mucho más integrado si usas una sombra azul más oscura en lugar de negra.
Opacidad
Define qué tan intensa se ve la sombra.
- 20%: sutil.
- 40%: intermedia.
- 70% o más: fuerte y llamativa.
En la mayoría de interfaces modernas, las sombras suelen estar entre 10% y 30%.
Una sombra demasiado oscura puede verse pesada o anticuada.
Ejemplos de configuraciones que funcionan muy bien
Aquí tienes combinaciones que suelen dar buen resultado:
Sombra moderna para tarjetas
- X: 0px
- Y: 10px
- Blur: 25px
- Spread: 0px
- Opacidad: 20%
Ideal para cards, secciones destacadas o contenedores principales.
Botón elevado elegante
- X: 0px
- Y: 6px
- Blur: 15px
- Spread: 0px
- Opacidad: 25%
Genera profundidad sin exagerar.
Efecto neumorfismo interior
- Activar “Sombra Interior”
- X: 5px
- Y: 5px
- Blur: 15px
- Opacidad: 20%
Perfecto para estilos suaves y minimalistas.
Cómo copiar y usar el código
Cuando encuentres la sombra que te gusta:
- Haz clic en el botón “Copiar”.
- Verás que el texto cambia a “¡Copiado!”.
- Pega el código en tu archivo CSS.
El resultado será algo como:
box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.2);
Solo debes añadirlo dentro de la clase o selector correspondiente.
¿Dónde puedes aplicar estas sombras?
Prácticamente en cualquier elemento:
- Botones
- Tarjetas
- Imágenes
- Formularios
- Modales
- Menús desplegables
- Contenedores destacados
Si un elemento necesita profundidad, separación visual o jerarquía, una buena sombra puede marcar la diferencia.
Consejos rápidos para que tus sombras se vean profesionales
- No abuses de la opacidad.
- Prefiere sombras suaves antes que extremadamente oscuras.
- Mantén coherencia en todo el diseño.
- Usa desenfoque suficiente para que la sombra no se vea “dura”.
- Prueba colores relacionados con tu paleta.
Y sobre todo, experimenta. Mueve los controles. Prueba combinaciones distintas. Ajusta un valor, luego otro. A veces la diferencia entre una sombra normal y una excelente está en apenas 5 píxeles.
Para cerrar
Este generador no es solo una herramienta técnica. Es una forma práctica, rápida y visual de mejorar el aspecto de tus proyectos web sin complicarte con fórmulas ni pruebas interminables.
Si quieres que tus botones tengan más presencia, que tus tarjetas destaquen o que tu interfaz se vea más cuidada, esta herramienta puede convertirse en parte habitual de tu flujo de trabajo.
Ahora abre el generador, empieza a mover los controles y crea una sombra que realmente aporte carácter a tu diseño.
You have not enough Humanizer words left. Upgrade your Surfer plan.