Generador de sombras CSS
Box Shadow Generator
Compone sombras de caja y de texto en varias capas con vista previa en vivo, y emite el CSS.
Compone una sombra a partir de capas y la emite como `box-shadow`, `text-shadow` o un filtro `drop-shadow()`. Lo que conviene saber es que una sola capa casi nunca es correcta: una sombra real es un término de contacto oscuro y ceñido más uno ambiental amplio y tenue, y una sola sombra solo puede ser uno de los dos. La página insiste en eso, y te dice qué partes de una capa no puede expresar la propiedad de destino.
- Capa 1
- Capa 2
Preajustes
Los desplazamientos crecen más o menos linealmente con la elevación y el desenfoque con su raíz cuadrada, que es lo que produce de verdad una luz puntual sobre un plano. La opacidad baja según crece la sombra — la misma oclusión repartida sobre más área — y hacerlo al revés es lo que convierte las sombras ajustadas a mano en manchas.
CSS
box-shadow: 0px 1px 3px rgb(0 0 0 / 0.1), 0px 4px 8px -2px rgb(0 0 0 / 0.08);Cómo se usa
Di sobre qué va
`box-shadow` para una tarjeta o un botón, `text-shadow` para tipografía, `drop-shadow()` para cualquier cosa con transparencia real: un icono o un PNG recortado. La vista previa cambia para coincidir, así que siempre estás mirando lo correcto.
Empieza desde un preajuste
Son pilas de dos capas con los desplazamientos creciendo linealmente con la elevación, el desenfoque con su raíz cuadrada, y la opacidad cayendo a medida que la sombra se extiende. Esto último es la parte que la gente hace al revés a mano, y hacerlo al revés es lo que hace que una sombra parezca una mancha.
Fija el color de superficie que realmente tienes
Una sombra afinada sobre blanco es demasiado débil en una página gris y demasiado fuerte en una oscura. La muestra de superficie está ahí para que afines contra el fondo sobre el que el componente estará de verdad.
Ajusta las capas
Desplazamiento, desenfoque, extensión y color por capa, y una casilla de inset. Escribe el color en lugar de usar la muestra cuando necesites alfa: los colores de sombra son casi siempre translúcidos, y la entrada de color nativa no puede representar eso.
Copia la declaración
El nombre de la propiedad cambia con el destino, así que lo que copias está listo para pegarse tal cual.
Preguntas frecuentes
Mi inset y mi extensión desaparecieron al cambiar de destino. ¿Adónde fueron?
Se descartaron, y la página lo dice encima de la salida. `text-shadow` no tiene inset ni extensión en su gramática: toma una x, una y, un desenfoque y un color, y punto. `drop-shadow()` tampoco tiene inset ni extensión. Emitirlos de todos modos produciría una declaración que el navegador descarta por completo, que es peor que perder la parte que no puede sobrevivir.
¿Por qué la muestra de color no coincide con lo que escribí?
La muestra es un `<input type="color">`, que solo entiende `#rrggbb` y no tiene alfa en absoluto. Muestra un hexadecimal aproximado de lo que escribiste, y el campo de texto sigue siendo el que manda. Edita el texto cuando el valor tenga alfa.
¿`drop-shadow()` es solo un `box-shadow` más lento?
No, responde a una pregunta distinta. `box-shadow` sigue la caja del borde, así que un PNG transparente recibe un rectángulo. `drop-shadow()` sigue el canal alfa, así que sigue la forma real. Sí cuesta una pasada de composición, y no puede hacer inset ni extensión, así que úsalo cuando la forma importe y `box-shadow` en los demás casos.
¿Cuántas capas son demasiadas?
Dos o tres hacen todo lo que necesita una interfaz. Cada capa es otro desenfoque que el compositor corre en cada pintado, y una sombra de seis capas en una lista de doscientas filas es un costo medible de fotogramas por segundo en un teléfono. Los preajustes se detienen en tres por esa razón.
Puede recibir de
Generador de esquinas redondeadas
Border Radius Generator
Da forma a cada esquina por separado, incluida la sintaxis de dos valores para formas orgánicas, y emite el CSS.
Editor de curvas de aceleración
Easing Curve Editor
Ajusta una curva cubic-bezier o de resorte contra una vista previa animada y emite la función de tiempo en CSS.
Laboratorio de filtros CSS
CSS Filter Playground
Apila filtros de desenfoque, brillo, saturación, tono y sombra sobre una muestra y emite el CSS.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Generador de esquinas redondeadas
Border Radius Generator
Da forma a cada esquina por separado, incluida la sintaxis de dos valores para formas orgánicas, y emite el CSS.
Laboratorio de filtros CSS
CSS Filter Playground
Apila filtros de desenfoque, brillo, saturación, tono y sombra sobre una muestra y emite el CSS.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Generador de degradados CSS
CSS Gradient Builder
Compone degradados lineales, radiales y cónicos con paradas que se arrastran, y emite el CSS en sRGB o en OKLCH.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.