Generador de sombras CSS
Creá una sombra box-shadow visualmente, ajustá cada valor y copiá el CSS listo para usar.
Vista previa
CSS generado
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.25);Cómo crear una sombra CSS
Ajustá los desplazamientos X e Y, el desenfoque, la expansión, el color y la opacidad. La vista previa y la declaración box-shadow cambian en tiempo real.
Sintaxis de box-shadow
X mueve la sombra horizontalmente e Y verticalmente. Blur suaviza el borde, spread expande o contrae el área e inset coloca la sombra dentro del elemento.
box-shadow: X Y blur spread color;
Presets como punto de partida
Los presets aplican combinaciones editables. Copiá la declaración final y adaptala al fondo, tamaño y jerarquía visual de tu interfaz.
Explorar herramientas para desarrollo web