Generador de sombras CSS
Diseña un box-shadow de CSS con controles en vivo, presets y vista previa, y copia la regla lista.
100% privado: todo funciona en tu navegador
Cómo usarla
- 1
Mueve los controles para ajustar desplazamiento, desenfoque, expansión, color y opacidad.
- 2
Prueba un preset o pega un box-shadow existente para seguir editándolo.
- 3
Copia la regla CSS y pégala en tu hoja de estilos.
Ejemplos
Tarjeta elevada
Entrada
0 8px 24px -4px rgba(15,23,42,.18)Salida
box-shadow: 0 8px 24px -4px rgba(15,23,42,.18);Resplandor neón
Entrada
0 0 24px 2px rgba(99,102,241,.45)Salida
box-shadow: 0 0 24px 2px rgba(99,102,241,.45);Preguntas frecuentes
¿Qué hace la expansión?
Agranda o reduce la sombra en todas las direcciones antes de desenfocar; los valores negativos la aprietan.
¿Por qué cambia la sombra interior?
Se dibuja dentro del elemento, así que parece una superficie hundida.
¿Sirve para Tailwind?
Sí. Pega el valor en una propiedad arbitraria como shadow-[…].
Herramientas relacionadas
Generador de border-radiusDa forma a las cuatro esquinas por separado, enlázalas y copia la regla CSS.Generador de DegradadosCrea degradados CSS lineales y radiales visualmente y copia el código CSS.Generador de Colores CSSConvierte un color base en una escala de 10 tonos y expórtala como variables CSS.Formateador JSONFormatea, embellece, minimiza y valida JSON al instante, en tu navegador.Validador JSONValida JSON al instante y localiza los errores de sintaxis con línea, columna y posición exactas, directamente en tu navegador.Codificador/Decodificador Base64Codifica texto a Base64 y decodifica Base64 a texto: compatible con Unicode y emoji, 100 % en tu navegador.