Glassmorphism

"Olhando através de uma janela fosca. Interfaces que se misturam perfeitamente com fundos vibrantes."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Desfoque de Fundo (Backdrop Filter): A característica definidora. Os elementos desfocam o que está por baixo deles.
2. Fundos Brancos/Escuros Semitransparentes: Os painéis usam cores rgba() para deixar o fundo brilhar.
3. Bordas Claras Sutis: Uma borda semitransparente branca (ou clara) de 1px para simular a borda do vidro capturando a luz.

DNA Visual

• Cores: Requer um fundo vibrante ou texturizado para funcionar (por exemplo, gradientes, malhas abstratas ou fotos). Funciona lindamente sobre Yacht Club ou Elegância Terrena se houver textura visual subjacente.
• Tipografia: Fontes sans-serif limpas e geométricas. Texto de alto contraste (branco puro ou preto puro) é necessário para legibilidade contra o vidro.
• Sombras: Sombras projetadas suaves e sutis para destacar o painel de vidro do fundo.

Implementação Web

• Confie muito em backdrop-filter: blur().
• Exemplo de CSS:

body {
  /* Requires a complex background to see the glass effect */
  background: url('abstract-mesh.jpg') cover; 
}

.glass-panel {
  background: rgba(255, 255, 255, 0.15); /* Light glass */
  /* OR background: rgba(0, 0, 0, 0.25); for Dark glass */
  
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  
  border: 1px solid rgba(255, 255, 255, 0.3); /* The glass edge */
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  
  padding: 32px;
}

Implementação de Aplicativo

SwiftUI

struct GlassCard: View {
    var body: some View {
        ZStack {
            // Vibrant background required for glass to show
            LinearGradient(
                colors: [.purple, .blue, .cyan],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .ignoresSafeArea()
            
            // Glass panel
            VStack(alignment: .leading, spacing: 16) {
                Text("Glass Panel")
                    .font(.system(size: 22, weight: .semibold))
                    .foregroundColor(.white)
                Text("Content floating on frosted glass.")
                    .font(.system(size: 15))
                    .foregroundColor(.white.opacity(0.8))
                
                Button(action: {}) {
                    Text("Continue")
                        .font(.system(size: 15, weight: .semibold))
                        .foregroundColor(.white)
                        .padding(.horizontal, 24)
                        .padding(.vertical, 12)
                        .background(.ultraThinMaterial)
                        .cornerRadius(8)
                }
            }
            .padding(24)
            .background(.ultraThinMaterial)  // Built-in frosted glass
            .cornerRadius(16)
            .overlay(
                RoundedRectangle(cornerRadius: 16)
                    .stroke(.white.opacity(0.3), lineWidth: 1) // Glass edge highlight
            )
            .shadow(color: .black.opacity(0.1), radius: 20, x: 0, y: 10)
            .padding(24)
        }
    }
}

• Use .ultraThinMaterial, .thinMaterial, .regularMaterial, .thickMaterial — A Apple implementou o glassmorphism nativamente.
• Adicione .overlay(RoundedRectangle().stroke(.white.opacity(0.3))) para a captura da borda de luz.
• O vidro só funciona se houver um fundo vibrante visível atrás dele.

Flutter

class GlassCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // Fundo vibrante
        Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.purple, Colors.blue, Colors.cyan],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
        ),
        // Painel de vidro
        Center(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
              child: Container(
                padding: const EdgeInsets.all(24),
                decoration: BoxDecoration(

…