generador de sombras de texto css

El generador de sombras de texto CSS es un editor visual para la propiedad CSS Text-Shadow. Ajusta el desplazamiento horizontal, el desplazamiento vertical, el radio de desenfoque, el color y la opacidad con los controles deslizantes y observa el procesamiento de efectos en vivo en el texto de ejemplo, luego copia el CSS exacto. En lugar de adivinar los valores de píxeles y actualizar su página, moldea la sombra directamente y lee el código que produce.

Ya sea que busque un generador de sombras de texto CSS, una herramienta CSS de generador de sombras de texto o un generador de texto de sombras CSS, la salida es la misma declaración única. Haga clic en el ajuste preestablecido Difícil y el cuadro CSS generado muestra la sombra de texto: 2px 2px 0px #00000099; que es una capa negra con un 60% de opacidad, con la opacidad escrita en los dos últimos dígitos hexadecimales. Haga clic en Neon Glow y obtendrá tres capas separadas por comas con desenfoque de 7px, 14px y 28px. Copie CSS y copie toda la línea, incluido el punto y coma.

La propiedad de sombras de texto es más simple que la sombra de cuadro (no tiene radio extendido ni palabra clave insertada), pero las capas son lo que se vuelve poderoso. Una sola declaración puede apilar varias sombras, cada una con sus propios desplazamientos, desenfoque y color. Apilar capas es la forma de crear brillos de neón, contornos duros, letras 3D retro, efectos de relieve tipográfico y sombras largas y planas. Escribirlos a mano es complicado, por lo que esta herramienta gestiona las capas y genera una declaración separada por comas y válida según las especificaciones en el orden de pintura correcto.

Todo sucede en su navegador. Elija un preset como Neon Glow or Outline, sintonice cada capa, cambie la vista previa entre fondos claros y oscuros, edite el texto de muestra y copie el CSS. Sin cuenta, sin cargas, y sigue funcionando sin conexión una vez que la página se ha cargado.

El orden de las capas va de primero a último, de adelante hacia atrás, por lo que la sombra que aparece primero se encuentra en la parte superior. Eso es lo que hace que los contornos funcionen: cuatro pequeñas sombras desplazadas un píxel en cada dirección, apiladas, se aproximan a un trazo para el que CSS no tiene propiedad directa. El radio de desenfoque es la parte costosa de renderizar, y el texto con varios desenfoques grandes repintados en el desplazamiento es una causa común de jank en dispositivos de menor potencia. Las sombras nunca afectan el diseño, por lo que pueden desbordar su caja y ser recortadas por un padre con el desbordamiento oculto.