Animación de texto Tarjetas glassmorphism: la palabra aimotions animada en este estilo
184InterfazCSS

Tarjetas glassmorphism

Efecto de texto glassmorphism: tarjetas de cristal esmerilado flotan sobre orbes de color desenfocados, con la palabra en el panel principal. Para heros de apps y SaaS.

Prompt · cambia [TEXTO]

Universal
Crea una escena glassmorphism para la palabra [TEXTO]. Sobre un fondo lavanda pálido, cuatro o cinco orbes de color enormes y muy desenfocados (rosa intenso, violeta, mandarina, cian) se desplazan despacio. Delante, un gran panel de cristal esmerilado con esquinas redondeadas: desenfoque fuerte del fondo, un ligero tinte blanco, un borde fino y brillante, una sombra suave, una etiqueta diminuta de "vista previa en directo" y una barra de progreso estrecha. [TEXTO] va sobre el panel en blanco, en una palo seco geométrica ancha, y cada letra sube desde el desenfoque con un escalonado suave. Chips de cristal más pequeños (un botón redondo de reproducir, una tarjeta de datos con minigráfica, una etiqueta en forma de píldora) flotan a distintas profundidades con un paralaje lento. Un brillo diagonal recorre el cristal; mantén, desenfoca las letras hasta que desaparezcan y repite en bucle. Tranquilo y ligero.

ADN visual

  • Fondo lavanda pálido con grandes orbes saturados rosa, violeta, naranja y cian
  • Paneles esmerilados: fondo muy desenfocado, tinte blanco y borde fino brillante
  • Chips y botones que flotan a distintas profundidades con un paralaje lento
  • Entrada escalonada de borroso a nítido en una palo seco geométrica ancha
  • Brillo diagonal que recorre el cristal una vez por ciclo
Categoría
Interfaz sci-fi y web moderna
Demo hecha con
CSS
Energía
Tranquilo
Fondo
Claro

También conocido como

Apoyo
Mantén aimotions gratis

Sin muros de pago ni registro. Si un prompt te ha ahorrado una hora, un café ayuda a que sigan llegando estilos nuevos.

Invítame a un café

Teclas: ← → navegar · C copiar

Usa este estilo

  1. Paso 01Copia el prompt

    Describe el estilo Tarjetas glassmorphism (composición, tipografía, paleta, textura y ritmo) sin atarte a ninguna herramienta.

  2. Paso 02Cambia [TEXTO]

    Pon tu palabra, el nombre de tu producto o un titular. Las palabras cortas (4–12 letras) se leen mejor en la mayoría de estilos.

  3. Paso 03Pide un formato

    Pégalo en Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra o GPT-6.1 Sol o un modelo posterior, y pide un único archivo HTML, un componente, un shader o un brief. Para la cabecera de una web, usa «Copiar para título web».

Títulos web →Guía de prompts →

Estilos relacionados

Ver categoría Interfaz →

Que siga siendo gratis.

aimotions no tiene muro de pago ni registro. Se financia con quienes encuentran un estilo que les encanta. Un café en Ko-fi ayuda a pagar el alojamiento y la siguiente tanda de estilos.

Apoyar en Ko-fi ♥