HTML + CSSLiquid Glass
Iconos de cristal con luz en el canto
Iconos de app en cristal transparente cuyo canto brilla donde da la luz; la luz sigue al cursor y puedes teñirlos.
Ajustes
16px
1x
8px
Código
<div class="uvq11-ico"><div class="wp" aria-hidden="true"></div><div class="gr"><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 12c0-3 1-6 3.5-6S17 10 12 12zM12 12c3 0 6 1 6 3.5S14 17 12 12zM12 12c0 3-1 6-3.5 6S7 14 12 12zM12 12c-3 0-6-1-6-3.5S10 7 12 12z"/></svg></span><span class="nm">Fotos</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z"/><circle cx="12" cy="11" r="2.2"/></svg></span><span class="nm">Mapas</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/></svg></span><span class="nm">Música</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h12v16H6zM9 9h6M9 13h6M9 17h3"/></svg></span><span class="nm">Notas</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 7.5V12l3 2"/></svg></span><span class="nm">Reloj</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="9" r="3"/><path d="M9 3v1M3 9h1M4.8 4.8l.7.7M13.2 4.8l-.7.7M8 19h9a3.5 3.5 0 0 0 0-7 5 5 0 0 0-9.6 1.5A2.8 2.8 0 0 0 8 19z"/></svg></span><span class="nm">Tiempo</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.5-2h7L17 8h3v11H4z"/><circle cx="12" cy="13" r="3.2"/></svg></span><span class="nm">Cámara</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M5.6 18.4l1.8-1.8M16.6 7.4l1.8-1.8"/></svg></span><span class="nm">Ajustes</span></button></div><div class="md" role="radiogroup" aria-label="Estilo de los iconos"><label><input type="radio" name="uvq11-ico-m" value="c" checked><span>Transparente</span></label><label><input type="radio" name="uvq11-ico-m" value="t"><span>Tintado</span></label></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Una cuadrícula de inicio con el estilo de iconos transparentes: cada icono es vidrio esmerilado con desenfoque de fondo, un degradado cónico en un borde enmascarado que se ilumina en el lado que mira a la luz y en el opuesto, y un brillo interior suave. En reposo la luz gira despacio y, al pasar el cursor, apunta hacia él.
Cambia entre transparente y tintado con el control segmentado, fija el tinte con el color principal y ajusta el desenfoque. Renombra las apps o cambia los iconos de línea para montar lanzadores, paneles o secciones de presentación de apps.