Generador CSS Box Shadow - Crear Sombras Visualmente Online
Diseña CSS box shadows con controles visuales y vista previa. Crea sombras multicapa, efectos neumorfismo y copia código CSS listo para usar.
Preguntas Frecuentes
¿Qué es CSS box-shadow?
CSS box-shadow es una propiedad que añade efectos de sombra alrededor del marco de un elemento. Puede crear profundidad, elevación y jerarquía visual en el diseño web. La propiedad acepta múltiples parámetros: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión, color y una palabra clave opcional inset para sombras interiores.
¿Cómo uso este generador de box shadow?
Ajusta los controles deslizantes para establecer el desplazamiento horizontal/vertical, desenfoque, expansión y opacidad. Elige un color de sombra usando el selector de color. Activa 'Inset' para sombras interiores si es necesario. Añade múltiples capas para efectos complejos. Copia el código CSS generado a tu hoja de estilos.
¿Qué es el neumorfismo?
El neumorfismo (o Soft UI) es una tendencia de diseño que crea una apariencia suave y plástica extruida combinando dos sombras: una clara (simulando fuente de luz) y una oscura (simulando sombra). Requiere un color de fondo que coincida o complemente el color del elemento para que el efecto funcione correctamente.
¿Cómo creo sombras suaves y realistas?
Las sombras realistas usan múltiples capas con desenfoque y desplazamiento que aumentan progresivamente. El preset 'Layered' de esta herramienta crea este efecto automáticamente apilando múltiples capas de sombra con valores suavizados. También puedes añadir capas manualmente y ajustar sus valores incrementalmente.
¿Qué es una sombra inset?
Una sombra inset aparece dentro del marco del elemento en lugar de fuera. Crea un efecto presionado o grabado, comúnmente usado para campos de entrada, botones en estado presionado o pozos de contenedor. Activa la casilla 'Inset' para habilitar este efecto.
¿Es esta herramienta segura y privada?
Sí. Esta herramienta se ejecuta 100% en tu navegador usando JavaScript del lado del cliente. Ninguna configuración de sombra o datos de diseño se envía nunca a ningún servidor. Tu trabajo permanece completamente en tu dispositivo, asegurando privacidad completa para todo tu trabajo de diseño.
Ejemplos de Código
// Generate box-shadow CSS from parameters
function generateBoxShadow(layers) {
return layers.map(layer => {
const inset = layer.inset ? 'inset ' : '';
const { r, g, b } = hexToRgb(layer.color);
const rgba = `rgba(${r}, ${g}, ${b}, ${layer.opacity})`;
return `${inset}${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${layer.spread}px ${rgba}`;
}).join(', ');
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : { r: 0, g: 0, b: 0 };
}
// Usage
const shadow = generateBoxShadow([
{ offsetX: 0, offsetY: 4, blur: 6, spread: -1, color: '#000000', opacity: 0.1, inset: false },
{ offsetX: 0, offsetY: 2, blur: 4, spread: -2, color: '#000000', opacity: 0.1, inset: false }
]);
console.log(shadow);
// Output: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)