text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;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.
La propiedad de sombra de texto es más simple que la sombra de cuadros (no tiene radio de distribución ni palabra clave insertada), pero la capa es donde se vuelve potente. Una sola declaración puede apilar varias sombras, cada una con sus propios desplazamientos, desenfoque y color. Apilar capas es la forma en que construyes brillos de neón, contornos duros, letras 3D retro, efectos de relieve de tipografía y largas sombras planas. Escribirlos a mano es complicado, por lo que esta herramienta administra las capas y genera una declaración separada por comas y especificaciones válida 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.
Elija un preajuste como suave, neón brillo, retro 3D o contorno para obtener un punto de partida realista, o comience con una sola capa de sombra predeterminada y construya desde allí.
Arrastre los controles deslizantes de Desfase horizontal y vertical y Desenfoque de radio, luego establezca el color de la sombra y la opacidad. Mire la actualización de texto de muestra al instante mientras edita.
Agregue capas adicionales para crear brillo, contorno o profundidad 3D: varias copias offset de una sombra leen como texto extruido, mientras que las copias borrosas apiladas se leen como un brillo.
Copie la declaración de sombra de texto y péguela directamente en su hoja de estilo o en estilos de componentes. Aplíquelo a cualquier elemento de texto para obtener el mismo efecto.
Apila cualquier número de capas de sombra en una sola declaración, en el orden correcto de pintura de arriba a abajo, que es cómo se crean los brillos de neón, los contornos y el texto 3D
Los controles deslizantes para el desfase horizontal y vertical y el radio de desenfoque, además de un selector de color y un control de opacidad, cubren cada parte de la gramática de sombra de texto.
Muestra actualizaciones de texto al instante mientras editas, y puedes cambiar su fondo entre la luz y la oscuridad para comprobar cómo se lee el efecto en ambos temas.
Las recetas curadas para efectos suaves, duros, neón, retro 3D, contorno, relieve, fuego y efectos de sombra larga te dan un punto de partida probado en lugar de un lienzo en blanco.
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Pick colors and convert between HEX, RGB, and HSL formats
0 comments
No comments yet. Be the first to share your thoughts!