Crea sombras CSS con vista previa. Ajusta desplazamiento, desenfoque, expansión, color y opacidad, prueba estilos o sombras interiores y copia el CSS. Gratis.
● Tus archivos son tuyosCargando conversor…
Volver a cargar el conversorElige un estilo y ajusta sus valores. La vista previa y el CSS se actualizan al escribir. Los desplazamientos negativos mueven la sombra a la izquierda o arriba. Activa Interior para una sombra dentro del elemento. Copia la declaración en tu regla CSS. Restablecer recupera el estilo suave.
Una sombra por declaración. Píxeles enteros: desplazamientos y expansión de -100 a 100; desenfoque de 0 a 100; opacidad de 0 a 100%. Colores HEX de 3 o 6 dígitos, con # opcional. Se admiten dígitos árabes y persas. Sin capas múltiples, sombras de texto, exportación de imágenes ni importación de CSS. Los datos no se suben ni se guardan.
La declaración siguiente contiene desplazamiento horizontal, vertical, desenfoque, expansión y color, en ese orden. El alfa 0.22 significa 22% de opacidad. Una expansión negativa reduce la sombra y el desenfoque suaviza los bordes.
box-shadow: 0px 12px 28px -6px rgba(0, 0, 0, 0.22);El desenfoque suaviza el borde y no admite valores negativos. La expansión aumenta la sombra con valores positivos y la reduce con negativos. Con desenfoque cero, el borde es nítido.
Activa Interior o elige el estilo Sombra interior. La palabra inset mueve la sombra al interior del elemento.
Una opacidad de 0 es transparente. Una sombra sin desplazamiento, desenfoque ni expansión puede quedar justo detrás del elemento. Una expansión muy negativa también puede hacerla desaparecer.
No. La sombra no ocupa espacio en el diseño. Un elemento contenedor que recorte el desbordamiento puede ocultarla parcialmente; las esquinas redondeadas cambian su contorno.
Esta herramienta genera una sombra de caja. CSS admite capas separadas por comas, pero aquí no se editan varias capas. Para texto se usa la propiedad text-shadow.