Como creo unha sombra CSS e copio o código?

Axusta os controles de desprazamento X e Y, desenfoque, expansión, Cor e Opacidade, observando a vista previa en directo. Despois preme Copiar na saída CSS. Tamén podes comezar desde os Predefinidos como Suave, Brillo ou Material 8.

Podo apilar varias sombras nun mesmo elemento?

Si. Preme + Engadir outra capa de sombra para engadir máis capas, despois reordénaas, Agóchaas ou Elimínaas. As capas únense con comas nun único valor box-shadow.

Como fago unha sombra interior?

Selecciona unha capa e activa Sombra interior, ou carga o predefinido Inset. A saída incluirá a palabra clave inset para esa capa.

Podo obter unha clase de Tailwind en vez de CSS simple?

Si. Ademais da declaración CSS, a ferramenta xera unha clase de valor arbitrario de Tailwind coa forma shadow-[...], cos espazos substituídos por guións baixos, lista para pegar na túa maquetación.

Hai un xeito máis sinxelo de definir a posición da sombra que cos controles?

Si. Arrastra a caixa de vista previa para mover a sombra da capa activa e mantén premida a tecla Maiús para un control máis fino. Tamén podes cambiar a Vista previa do fondo e a Cor da caixa para ver como queda a sombra no teu deseño.

Si. Todas as ferramentas son de uso gratuíto, sen conta nin tarxeta de crédito. O traballo execútase no teu dispositivo en lugar de nos nosos servidores, o que permite que sexa gratuíto.

Si. Funciona nos navegadores móbiles actuais en iOS e Android, sen instalar nada.

🎨

Xerador de sombra CSS de balde

Constructor visual para box-shadow CSS con previsualización en directo, apilamento de múltiples capas, selector de cor, activación de inserción e copia cun clic. Inclúe preaxustes de Material, neumorfismo e brillo.

Execútase no teu navegadorSen rexistro, sen ventás emerxentesNon é necesario iniciar sesiónDe balde para sempre

Funciona sen conexión unha vez cargado

Vista previa do fondo

Arrastra a caixa para situar a sombra da capa activa - mantén Shift para control fino

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Predefinidos

Cor da caixa

Raio do bordo (16px)

x (0px)

y (4px)

desenfoque (12px)

expansión (0px)

Cor

Opacidade (15%)

Sombra interior

Usos habituais

Card UI ShadowsCrea sombras de tarxeta elegantes para paneis de instrumentos, rexas de produtos e paneles de instrumentos.
Button Press EffectsCrea sombras de botón que imitan profundidade real e estados de prensa.
Neumorphism Soft UICrea o aspecto neumorphism soft-UI con sombras de luz + escuridade emparedadas.
Modal & Popover ShadowsCrea a sensación elevada, flotante para diálogos e despregables.
Glow & Focus Ring EffectsCrea efectos de resplandor, aneis de enfoque e destacados de estilo neon.

Como funciona

O xerador de box-shadow é unha ferramenta React totalmente do lado do cliente — sen servidor, sen biblioteca. Mantén unha lista de obxectos de capas de sombra no estado, ensambla cadeas CSS box-shadow válidas en cada cambio usando un formateador rgba() escrito a man, e aplícaas directamente a un elemento de vista previa mediante a propiedade style de React para que o propio motor de renderización do navegador debuxe o resultado ao instante.

1
Os parámetros da capa alimentan o formateador
Cada capa de sombra almacena os desprazamentos x/y, o desenfoque, a extensión, unha cor hex e un valor de opacidade. En cada cambio, unha pequena función shadowToCss converte a cor hex a compoñentes RGB cunha expresión regular, e despois ensambla a cadea rgba() — por exemplo, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Varias capas únense con comas.
2
O navegador renderiza a vista previa en directo
A cadea ensamblada asígnase á propiedade de estilo boxShadow dun elemento div directamente en JSX. React actualiza o atributo DOM, e o motor CSS do navegador pinta a sombra inmediatamente — non hai canvas nin WebGL involucrados, só renderización CSS nativa.
3
Arrastrar para posicionar usa a API Pointer Events
Facer clic e arrastrar a caixa de vista previa chama a setPointerCapture no elemento, e despois rastrexa os deltas de onPointerMove para actualizar os desprazamentos x e y da capa activa en tempo real. Manter premido Maiús aplica un factor de escala de 0,25x para un posicionamento de precisión.
4
A saída cópiase ao portapapeis
A ferramenta produce dous formatos de saída a partir dos mesmos datos de capa: unha declaración CSS box-shadow estándar, e unha clase de valor arbitrario de Tailwind (shadow-[...]) onde os espazos substitúense por guións baixos segundo as regras de sintaxe de Tailwind. Copiar cun só clic usa navigator.clipboard.writeText.