Generador de sombras CSS: vista previa y copiar código
Ajusta desplazamiento, desenfoque, expansión, color y opacidad para crear un valor CSS box-shadow, ve la vista previa y copia el código.
Generador de sombras CSS
Este generador crea un único valor CSS box-shadow a partir de seis controles: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión, un color de sombra con su propio control de opacidad y un interruptor de tipo inset. Dos selectores de color adicionales fijan la caja de vista previa y su fondo, para que la sombra se vea bien tanto en superficies claras como oscuras, y cuatro preajustes, soft, hard, glow e inset, cargan una combinación lista con un solo clic. Cada cambio actualiza al instante la línea box-shadow bajo la vista previa, lista para copiar.
Cómo se construye el valor box-shadow
CSS escribe una sombra como una secuencia fija de números: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y después un color; para dibujar la sombra dentro del borde de la caja en lugar de detrás, se antepone la palabra inset. El desplazamiento horizontal y vertical mueve la sombra a los lados o en vertical, y ambos aceptan valores negativos hasta -50px, de modo que la sombra puede caer a la izquierda de la caja o quedar por encima. El radio de desenfoque, de 0 a 100px, suaviza el borde de la sombra, y el radio de expansión, de -50 a 50px, agranda o reduce la sombra con independencia del tamaño de la caja. El valor hexadecimal del selector de color se descompone en sus componentes rojo, verde y azul, y el control de opacidad, de 0 a 1, se convierte en el cuarto valor dentro de rgba(); en 0 la sombra queda totalmente transparente y en 1 coincide exactamente con el color elegido.
Ejemplo resuelto
Con un desplazamiento horizontal de 0px, uno vertical de 8px, un desenfoque de 18px y una expansión de -2px, junto con el color de sombra #b91c1c y una opacidad de 0,45, el resultado es box-shadow: 0px 8px 18px -2px rgba(185, 28, 28, 0.45). El código hexadecimal #b91c1c se descompone en rojo 185, verde 28 y azul 28, y el 0,45 del control de opacidad pasa directamente al cuarto valor de rgba() sin ninguna conversión adicional. Activar inset con los mismos seis valores dibuja la sombra idéntica dentro del borde de la caja en lugar de detrás, un efecto habitual en botones presionados o campos de entrada hundidos.
Código CSS listo para copiar
.tarjeta {
box-shadow: 0px 8px 18px -2px rgba(185, 28, 28, 0.45);
}