# designforai.dev (pt) > Snippets CSS, estilos de design e recursos novos de CSS, cada um com um prompt escrito para ferramentas de código com IA. Toda página tem um gêmeo em markdown (mesma URL com .md). ## Snippets - [Tinta chapada](https://designforai.dev/pt/snippet/btn-001.md): Botões, solid, flat, rectangle, subtle-lift - [Bloco cobalto](https://designforai.dev/pt/snippet/btn-002.md): Botões, solid, flat, rectangle, brand-blue - [Menta suave](https://designforai.dev/pt/snippet/btn-003.md): Botões, solid, flat, rounded, tinted-background - [Carmesim largo](https://designforai.dev/pt/snippet/btn-004.md): Botões, solid, flat, full-width, uppercase - [Ardósia quadrado](https://designforai.dev/pt/snippet/btn-005.md): Botões, solid, flat, square-corners, monochrome - [Girassol forte](https://designforai.dev/pt/snippet/btn-006.md): Botões, solid, flat, rounded, warm, dark-text - [Violeta espaçado](https://designforai.dev/pt/snippet/btn-007.md): Botões, solid, flat, rounded, letter-spacing-hover - [Carvão micro](https://designforai.dev/pt/snippet/btn-008.md): Botões, solid, flat, small, compact - [Contorno fino](https://designforai.dev/pt/snippet/btn-009.md): Botões, outline, ghost, rectangle, thin-border - [Contorno que preenche](https://designforai.dev/pt/snippet/btn-010.md): Botões, outline, rectangle, fill-on-hover, 2px-border - [Texto ghost](https://designforai.dev/pt/snippet/btn-011.md): Botões, ghost, borderless, text-button, minimal - [Contorno tracejado](https://designforai.dev/pt/snippet/btn-012.md): Botões, outline, dashed, rectangle, add-action - [Contorno em linha dupla](https://designforai.dev/pt/snippet/btn-013.md): Botões, outline, double-border, editorial, square - [Ghost com borda no hover](https://designforai.dev/pt/snippet/btn-014.md): Botões, ghost, outline, rounded, border-appears - [Pílula rosé](https://designforai.dev/pt/snippet/btn-015.md): Botões, outline, pill, thin-border, tinted-hover - [Ghost invertido (fundo escuro)](https://designforai.dev/pt/snippet/btn-016.md): Botões, ghost, outline, dark-background, white-border - [Pílula clássica](https://designforai.dev/pt/snippet/btn-017.md): Botões, pill, solid, rounded, shadow-lift - [Pílula em dois tons](https://designforai.dev/pt/snippet/btn-018.md): Botões, pill, solid, two-tone, badge - [Pílula com anel](https://designforai.dev/pt/snippet/btn-019.md): Botões, pill, outline, ring-hover, rounded - [Squircle](https://designforai.dev/pt/snippet/btn-020.md): Botões, rounded, solid, squircle, large-radius - [Pílula que encolhe](https://designforai.dev/pt/snippet/btn-021.md): Botões, pill, solid, scale, press - [Cápsula com ponto](https://designforai.dev/pt/snippet/btn-022.md): Botões, pill, status, indicator, pulse - [Raio assimétrico](https://designforai.dev/pt/snippet/btn-023.md): Botões, rounded, solid, asymmetric, playful - [Gradiente pôr do sol](https://designforai.dev/pt/snippet/btn-024.md): Botões, gradient, solid, rounded, warm - [Deslize aurora](https://designforai.dev/pt/snippet/btn-025.md): Botões, gradient, animated, background-position, rounded - [Borda gradiente](https://designforai.dev/pt/snippet/btn-026.md): Botões, gradient, outline, border-gradient, mask - [Ghost texto gradiente](https://designforai.dev/pt/snippet/btn-027.md): Botões, gradient, ghost, text-gradient, background-clip - [Oceano profundo](https://designforai.dev/pt/snippet/btn-028.md): Botões, gradient, solid, vertical, dark - [Ponto de luz radial](https://designforai.dev/pt/snippet/btn-029.md): Botões, gradient, radial, hover-move, rounded - [Mesh pastel](https://designforai.dev/pt/snippet/btn-030.md): Botões, gradient, multi-layer, pastel, soft - [Ouro metálico](https://designforai.dev/pt/snippet/btn-031.md): Botões, gradient, metallic, shine, luxury - [Pílula vidro fosco](https://designforai.dev/pt/snippet/btn-032.md): Botões, glassmorphism, pill, blur, translucent - [Vidro escuro](https://designforai.dev/pt/snippet/btn-033.md): Botões, glassmorphism, dark, rounded, blur - [Vidro com borda luminosa](https://designforai.dev/pt/snippet/btn-034.md): Botões, glassmorphism, glow, pill, border-gradient - [Vidro claro](https://designforai.dev/pt/snippet/btn-035.md): Botões, glassmorphism, light, rectangle, shadow - [Aba de vidro](https://designforai.dev/pt/snippet/btn-036.md): Botões, glassmorphism, pill, small, tab-like - [Vidro com luz interna](https://designforai.dev/pt/snippet/btn-037.md): Botões, glassmorphism, rounded, inner-gradient, premium - [Argila em relevo](https://designforai.dev/pt/snippet/btn-038.md): Botões, neumorphic, soft-ui, raised, rounded - [Suave afundado](https://designforai.dev/pt/snippet/btn-039.md): Botões, neumorphic, soft-ui, inset, rounded - [Ícone circular suave](https://designforai.dev/pt/snippet/btn-040.md): Botões, neumorphic, soft-ui, circle, icon - [Suave modo escuro](https://designforai.dev/pt/snippet/btn-041.md): Botões, neumorphic, soft-ui, dark, rounded - [Pílula suave acentuada](https://designforai.dev/pt/snippet/btn-042.md): Botões, neumorphic, soft-ui, pill, accent-text - [Chip suave](https://designforai.dev/pt/snippet/btn-043.md): Botões, neumorphic, soft-ui, small, chip - [Neobrutal amarelo](https://designforai.dev/pt/snippet/btn-044.md): Botões, brutalist, neo-brutalist, hard-shadow, square - [Pílula neobrutal rosa](https://designforai.dev/pt/snippet/btn-045.md): Botões, brutalist, neo-brutalist, pill, hard-shadow - [Brutalista mono](https://designforai.dev/pt/snippet/btn-046.md): Botões, brutalist, monospace, square, inverted-hover - [Neobrutal sombra colorida](https://designforai.dev/pt/snippet/btn-047.md): Botões, brutalist, neo-brutalist, coloured-shadow, rounded - [Brutalista listrado](https://designforai.dev/pt/snippet/btn-048.md): Botões, brutalist, pattern, stripes, square - [Neobrutal escuro](https://designforai.dev/pt/snippet/btn-049.md): Botões, brutalist, neo-brutalist, dark, hard-shadow - [Tag brutalista](https://designforai.dev/pt/snippet/btn-050.md): Botões, brutalist, small, tag, rotate - [Bala de pressionar](https://designforai.dev/pt/snippet/btn-051.md): Botões, 3d, press-down, rounded, bottom-edge - [Tecla de teclado](https://designforai.dev/pt/snippet/btn-052.md): Botões, 3d, press-down, keyboard, square - [Arcade vermelho](https://designforai.dev/pt/snippet/btn-053.md): Botões, 3d, press-down, circle, arcade - [Cartão que inclina](https://designforai.dev/pt/snippet/btn-054.md): Botões, 3d, perspective, tilt, hover-rotate - [Camadas empilhadas](https://designforai.dev/pt/snippet/btn-055.md): Botões, 3d, layered, offset, retro - [Chanfro cromado](https://designforai.dev/pt/snippet/btn-056.md): Botões, 3d, bevel, chrome, retro - [Preenchimento brasa](https://designforai.dev/pt/snippet/btn-057.md): Botões, hover-fill, slide-left, outline, rounded - [Preenchimento que sobe](https://designforai.dev/pt/snippet/btn-058.md): Botões, hover-fill, slide-up, outline, square - [Expansão central](https://designforai.dev/pt/snippet/btn-059.md): Botões, hover-fill, grow-center, pill, scale - [Varredura diagonal](https://designforai.dev/pt/snippet/btn-060.md): Botões, hover-fill, diagonal, skew, rectangle - [Cortina dividida](https://designforai.dev/pt/snippet/btn-061.md): Botões, hover-fill, split, two-panels, outline - [Persiana de cima](https://designforai.dev/pt/snippet/btn-062.md): Botões, hover-fill, slide-down, solid, dark - [Varredura do canto](https://designforai.dev/pt/snippet/btn-063.md): Botões, hover-fill, corner, circle-grow, rounded - [Troca de texto](https://designforai.dev/pt/snippet/btn-064.md): Botões, hover-fill, text-swap, slide-up, solid - [Sublinhado crescente](https://designforai.dev/pt/snippet/btn-065.md): Botões, underline, text-button, border-draw, minimal - [Sublinhado do centro](https://designforai.dev/pt/snippet/btn-066.md): Botões, underline, text-button, border-draw, center-origin - [Borda que se desenha](https://designforai.dev/pt/snippet/btn-067.md): Botões, border-draw, outline, corners, animated-border - [Colchetes revelados](https://designforai.dev/pt/snippet/btn-068.md): Botões, border-draw, brackets, text-button, minimal - [Sublinhado duplo](https://designforai.dev/pt/snippet/btn-069.md): Botões, underline, text-button, two-lines, offset - [Marca-texto](https://designforai.dev/pt/snippet/btn-070.md): Botões, underline, highlight, text-button, marker - [Reflexo em fundo escuro](https://designforai.dev/pt/snippet/btn-071.md): Botões, shine, sheen, solid, dark, sweep - [Brilho contínuo](https://designforai.dev/pt/snippet/btn-072.md): Botões, shine, shimmer, animated, gradient, loop - [Brilho no topo](https://designforai.dev/pt/snippet/btn-073.md): Botões, shine, gloss, static-highlight, rounded - [Luz em contorno](https://designforai.dev/pt/snippet/btn-074.md): Botões, shine, sheen, outline, border-sweep - [Reflexo em pílula dourada](https://designforai.dev/pt/snippet/btn-075.md): Botões, shine, sheen, pill, gradient, luxury - [Seta que avança](https://designforai.dev/pt/snippet/btn-076.md): Botões, icon, arrow, inline-svg, nudge - [Mais que gira](https://designforai.dev/pt/snippet/btn-077.md): Botões, icon, plus, inline-svg, rotate, circle - [Download que cai](https://designforai.dev/pt/snippet/btn-078.md): Botões, icon, download, inline-svg, bounce - [Ícone ghost quadrado](https://designforai.dev/pt/snippet/btn-079.md): Botões, icon, ghost, square, toolbar - [Caixa de ícone dividida](https://designforai.dev/pt/snippet/btn-080.md): Botões, icon, arrow, boxed-icon, two-part - [Chevron revelado](https://designforai.dev/pt/snippet/btn-081.md): Botões, icon, chevron, hidden-icon, width-grow - [Anel de carregamento](https://designforai.dev/pt/snippet/btn-082.md): Botões, loading, spinner, css-animation, solid - [Loader de três pontos](https://designforai.dev/pt/snippet/btn-083.md): Botões, loading, dots, css-animation, pill - [Barra de progresso](https://designforai.dev/pt/snippet/btn-084.md): Botões, loading, progress, animated-fill, outline - [Ghost pulsante](https://designforai.dev/pt/snippet/btn-085.md): Botões, loading, pulse, skeleton, ghost - [Switch (checkbox)](https://designforai.dev/pt/snippet/btn-086.md): Botões, toggle, switch, checkbox, pill - [Pílula alternável](https://designforai.dev/pt/snippet/btn-087.md): Botões, toggle, pressed, aria-pressed, pill - [Aba deslizante](https://designforai.dev/pt/snippet/btn-088.md): Botões, toggle, two-option, radio, segmented, slider - [Ação dividida](https://designforai.dev/pt/snippet/btn-089.md): Botões, split, dual, dropdown, solid - [Par duplo](https://designforai.dev/pt/snippet/btn-090.md): Botões, split, dual, primary-secondary, pair - [Dividido com contador](https://designforai.dev/pt/snippet/btn-091.md): Botões, split, dual, counter, badge - [Pixel 8 bits](https://designforai.dev/pt/snippet/btn-092.md): Botões, retro, pixel, 8-bit, stepped-corners - [Prompt de terminal](https://designforai.dev/pt/snippet/btn-093.md): Botões, retro, terminal, monospace, blink - [CRT âmbar](https://designforai.dev/pt/snippet/btn-094.md): Botões, retro, terminal, amber, scanlines - [Cinza Win95](https://designforai.dev/pt/snippet/btn-095.md): Botões, retro, win95, bevel, system - [Primário meia-noite](https://designforai.dev/pt/snippet/btn-096.md): Botões, dark-mode, solid, rounded, glow - [Secundário meia-noite](https://designforai.dev/pt/snippet/btn-097.md): Botões, dark-mode, outline, subtle, rounded - [Segmentado triplo](https://designforai.dev/pt/snippet/btn-098.md): Botões, group, segmented, radio, three-options - [Grupo de botões unidos](https://designforai.dev/pt/snippet/btn-099.md): Botões, group, joined, outline, toolbar - [Grupo de filtros em pílula](https://designforai.dev/pt/snippet/btn-100.md): Botões, group, pills, checkbox, multi-select - [Anel cônico giratório](https://designforai.dev/pt/snippet/btn-101.md): Botões, gradient-border, animated, pill, conic, property - [Fatia cônica em órbita](https://designforai.dev/pt/snippet/btn-102.md): Botões, gradient-border, animated, rounded, conic, property, hover-start - [Anel com halo](https://designforai.dev/pt/snippet/btn-103.md): Botões, gradient-border, animated, pill, conic, glow, property - [Tracejado em marcha](https://designforai.dev/pt/snippet/btn-104.md): Botões, gradient-border, animated, rectangle, conic, dashed - [Realce em varredura](https://designforai.dev/pt/snippet/btn-105.md): Botões, gradient-border, animated, rounded, conic, monochrome, property - [Neon ciano pulsante](https://designforai.dev/pt/snippet/btn-106.md): Botões, glow, neon, pill, pulse, dark - [Batimento magenta](https://designforai.dev/pt/snippet/btn-107.md): Botões, glow, neon, rounded, pulse, ring - [Tubo lima tremulante](https://designforai.dev/pt/snippet/btn-108.md): Botões, glow, neon, rectangle, dark, flicker - [Brasa respirando](https://designforai.dev/pt/snippet/btn-109.md): Botões, glow, warm, pill, pulse, soft-shadow - [Ghost com brilho na borda](https://designforai.dev/pt/snippet/btn-110.md): Botões, glow, outline, rounded, subtle, light-background - [Blob que se transforma](https://designforai.dev/pt/snippet/btn-111.md): Botões, liquid, blob, morph, border-radius, organic - [Pílula líquida](https://designforai.dev/pt/snippet/btn-112.md): Botões, liquid, pill, morph, animated, loop - [Interior de lava](https://designforai.dev/pt/snippet/btn-113.md): Botões, liquid, pill, animated, gradient, blob-inside - [Canto em gota](https://designforai.dev/pt/snippet/btn-114.md): Botões, liquid, morph, rounded, asymmetric, spring - [Squircle amassado](https://designforai.dev/pt/snippet/btn-115.md): Botões, liquid, squircle, morph, scale, soft-body - [Troca vertical de texto](https://designforai.dev/pt/snippet/btn-116.md): Botões, text-swap, slide, rectangle, two-labels - [Face de cubo](https://designforai.dev/pt/snippet/btn-117.md): Botões, text-swap, flip, 3d, rounded, two-labels - [Tracking revelado](https://designforai.dev/pt/snippet/btn-118.md): Botões, text-swap, expand, pill, uppercase, letter-spacing - [Riscar e substituir](https://designforai.dev/pt/snippet/btn-119.md): Botões, text-swap, strikethrough, rectangle, price, reveal - [Apagar de máquina de escrever](https://designforai.dev/pt/snippet/btn-120.md): Botões, text-swap, typewriter, mono, steps, terminal - [Cartão inclinado elevado](https://designforai.dev/pt/snippet/btn-121.md): Botões, tilt, 3d, rounded, perspective, lift - [Atração magnética](https://designforai.dev/pt/snippet/btn-122.md): Botões, tilt, magnetic, pill, translate, overshoot - [Camadas em parallax](https://designforai.dev/pt/snippet/btn-123.md): Botões, tilt, 3d, layered, rectangle, depth - [Balanço de pêndulo](https://designforai.dev/pt/snippet/btn-124.md): Botões, tilt, rotate, rounded, hinge, animated - [Inclinação skew](https://designforai.dev/pt/snippet/btn-125.md): Botões, tilt, skew, rectangle, italic, shadow-offset - [Metal escovado](https://designforai.dev/pt/snippet/btn-126.md): Botões, skeuomorphic, embossed, rectangle, metallic, gradient - [Couro costurado](https://designforai.dev/pt/snippet/btn-127.md): Botões, skeuomorphic, embossed, rounded, stitched, warm - [Papel em relevo](https://designforai.dev/pt/snippet/btn-128.md): Botões, skeuomorphic, embossed, rectangle, letterpress, light - [Tecla de vidro](https://designforai.dev/pt/snippet/btn-129.md): Botões, skeuomorphic, embossed, pill, glossy, jelly - [Botão giratório pressionado](https://designforai.dev/pt/snippet/btn-130.md): Botões, skeuomorphic, embossed, circle, icon, ring - [Bolha de argila](https://designforai.dev/pt/snippet/btn-131.md): Botões, claymorphism, pill, soft, inset-shadow, pastel - [Argila pêssego](https://designforai.dev/pt/snippet/btn-132.md): Botões, claymorphism, rounded, soft, pastel, warm - [Ícone de argila menta](https://designforai.dev/pt/snippet/btn-133.md): Botões, claymorphism, circle, icon, soft, pastel - [Argila lavanda larga](https://designforai.dev/pt/snippet/btn-134.md): Botões, claymorphism, full-width, soft, pastel, subtitle - [Argila modo escuro](https://designforai.dev/pt/snippet/btn-135.md): Botões, claymorphism, rounded, dark, soft, inset-shadow - [Deriva aurora](https://designforai.dev/pt/snippet/btn-136.md): Botões, aurora, mesh, pill, animated, gradient - [Mesh nascer do sol](https://designforai.dev/pt/snippet/btn-137.md): Botões, aurora, mesh, rounded, warm, static-with-hover - [Barra aurora boreal](https://designforai.dev/pt/snippet/btn-138.md): Botões, aurora, full-width, animated, dark, gradient-sweep - [Folha holográfica](https://designforai.dev/pt/snippet/btn-139.md): Botões, aurora, holographic, pill, animated, iridescent - [Texto aurora em contorno](https://designforai.dev/pt/snippet/btn-140.md): Botões, aurora, outline, gradient-text, rounded, animated - [Fatia glitch](https://designforai.dev/pt/snippet/btn-141.md): Botões, cyberpunk, glitch, rectangle, clip-path, animated - [Cantos chanfrados](https://designforai.dev/pt/snippet/btn-142.md): Botões, cyberpunk, clip-path, rectangle, angular, hud - [Varredura de scanline](https://designforai.dev/pt/snippet/btn-143.md): Botões, cyberpunk, scanline, rectangle, dark, animated - [Tag com recorte](https://designforai.dev/pt/snippet/btn-144.md): Botões, cyberpunk, clip-path, rectangle, notch, label - [Separação RGB](https://designforai.dev/pt/snippet/btn-145.md): Botões, cyberpunk, glitch, pill, chromatic, text-shadow - [Preenchimento inset lateral](https://designforai.dev/pt/snippet/btn-146.md): Botões, inset-fill, outline, rectangle, box-shadow, left-to-right - [Preenchimento inset vertical](https://designforai.dev/pt/snippet/btn-147.md): Botões, inset-fill, outline, pill, box-shadow, bottom-up - [Preenchimento inset central](https://designforai.dev/pt/snippet/btn-148.md): Botões, inset-fill, outline, rounded, box-shadow, spread-from-centre - [Preenchimento inset duplo](https://designforai.dev/pt/snippet/btn-149.md): Botões, inset-fill, outline, rectangle, box-shadow, two-shadows - [Anel inset que estoura](https://designforai.dev/pt/snippet/btn-150.md): Botões, inset-fill, outline, circle, icon, box-shadow - [Colchetes nos cantos](https://designforai.dev/pt/snippet/btn-151.md): Botões, bracket, corner-mark, rectangle, outline, hover-expand - [Marcas nos quatro cantos](https://designforai.dev/pt/snippet/btn-152.md): Botões, bracket, corner-mark, rectangle, outline, viewfinder - [Colchetes ao redor](https://designforai.dev/pt/snippet/btn-153.md): Botões, bracket, corner-mark, text, minimal, slide-in - [Pontos nos cantos](https://designforai.dev/pt/snippet/btn-154.md): Botões, bracket, corner-mark, rounded, dots, outline - [Seta com brackets](https://designforai.dev/pt/snippet/btn-155.md): Botões, bracket, corner-mark, text, code, chevron - [Adesivo inclinado](https://designforai.dev/pt/snippet/btn-156.md): Botões, sticker, badge, rotation, rounded, white-edge - [Etiqueta com furo](https://designforai.dev/pt/snippet/btn-157.md): Botões, sticker, badge, tag, rotation, clip-path - [Carimbo redondo](https://designforai.dev/pt/snippet/btn-158.md): Botões, sticker, badge, circle, rotation, double-ring - [Fita no canto](https://designforai.dev/pt/snippet/btn-159.md): Botões, sticker, badge, ribbon, rotation, rectangle - [Adesivo com contorno](https://designforai.dev/pt/snippet/btn-160.md): Botões, sticker, badge, pill, rotation, outline-stroke - [Chip com fechar suave](https://designforai.dev/pt/snippet/btn-161.md): Botões, chip, pill, close-x, small, tinted - [Chip com fechar contornado](https://designforai.dev/pt/snippet/btn-162.md): Botões, chip, pill, close-x, outline, small - [Chip selecionável com check](https://designforai.dev/pt/snippet/btn-163.md): Botões, chip, pill, toggle, small, checkbox-driven - [Chip com contador e fechar](https://designforai.dev/pt/snippet/btn-164.md): Botões, chip, rounded, close-x, count, small - [Chip com avatar](https://designforai.dev/pt/snippet/btn-165.md): Botões, chip, pill, close-x, avatar, small - [FAB clássico](https://designforai.dev/pt/snippet/btn-166.md): Botões, fab, circle, icon, elevated, floating - [FAB estendido](https://designforai.dev/pt/snippet/btn-167.md): Botões, fab, pill, icon, label, floating - [FAB com mais giratório](https://designforai.dev/pt/snippet/btn-168.md): Botões, fab, circle, icon, rotate, floating - [FAB squircle gradiente](https://designforai.dev/pt/snippet/btn-169.md): Botões, fab, squircle, icon, gradient, floating - [Pilha de mini FABs](https://designforai.dev/pt/snippet/btn-170.md): Botões, fab, circle, icon, small, group - [Link com seta deslizante](https://designforai.dev/pt/snippet/btn-171.md): Botões, link-style, arrow, text, minimal, slide - [Seta que entra](https://designforai.dev/pt/snippet/btn-172.md): Botões, link-style, arrow, text, reveal, underline - [Seta em círculo](https://designforai.dev/pt/snippet/btn-173.md): Botões, link-style, arrow, icon-circle, text, expand - [Seta com linha longa](https://designforai.dev/pt/snippet/btn-174.md): Botões, link-style, arrow, line, editorial, expand - [Seta que quica](https://designforai.dev/pt/snippet/btn-175.md): Botões, link-style, arrow, text, animated, bounce - [Brilho IA gradiente](https://designforai.dev/pt/snippet/btn-176.md): Botões, sparkle, ai, pill, gradient, icon, animated - [Brilho IA contornado](https://designforai.dev/pt/snippet/btn-177.md): Botões, sparkle, ai, rounded, outline, gradient-border, icon - [Brilho em órbita](https://designforai.dev/pt/snippet/btn-178.md): Botões, sparkle, ai, pill, dark, animated, orbit - [Brilho com reflexo](https://designforai.dev/pt/snippet/btn-179.md): Botões, sparkle, ai, rounded, shimmer, light - [Varinha mágica](https://designforai.dev/pt/snippet/btn-180.md): Botões, sparkle, ai, pill, icon, rotate, gradient - [Segurar para confirmar](https://designforai.dev/pt/snippet/btn-181.md): Botões, progress, hold, rectangle, fill, active-driven - [Barra de progresso estática](https://designforai.dev/pt/snippet/btn-182.md): Botões, progress, rectangle, fill, custom-property, percentage - [Anel de progresso cônico](https://designforai.dev/pt/snippet/btn-183.md): Botões, progress, circle, ring, conic, custom-property - [Listras indeterminadas](https://designforai.dev/pt/snippet/btn-184.md): Botões, progress, rectangle, striped, animated, busy - [Contagem regressiva](https://designforai.dev/pt/snippet/btn-185.md): Botões, progress, pill, drain, animated, timed - [Pílula de compartilhar](https://designforai.dev/pt/snippet/btn-186.md): Botões, share, pill, icon, outline, generic - [Copiar link com feedback](https://designforai.dev/pt/snippet/btn-187.md): Botões, share, copy-link, rounded, icon, text-swap - [Linha de compartilhar dividida](https://designforai.dev/pt/snippet/btn-188.md): Botões, share, group, rounded, icon-buttons, generic - [Compartilhar em leque](https://designforai.dev/pt/snippet/btn-189.md): Botões, share, group, reveal, icon-buttons, hover-expand - [Compartilhar com contador](https://designforai.dev/pt/snippet/btn-190.md): Botões, share, pill, count, icon, split - [Banner CTA com subtítulo](https://designforai.dev/pt/snippet/btn-191.md): Botões, cta, banner, wide, subtitle, dark - [Banner CTA com seta](https://designforai.dev/pt/snippet/btn-192.md): Botões, cta, banner, wide, subtitle, arrow, light - [Banner CTA gradiente](https://designforai.dev/pt/snippet/btn-193.md): Botões, cta, banner, wide, subtitle, gradient, centered - [Banner CTA com ícone](https://designforai.dev/pt/snippet/btn-194.md): Botões, cta, banner, wide, subtitle, icon, soft - [Micro pílula](https://designforai.dev/pt/snippet/btn-195.md): Botões, xs, micro, pill, tiny, neutral - [Micro tecla](https://designforai.dev/pt/snippet/btn-196.md): Botões, xs, micro, keyboard, mono, rectangle - [Micro ícone quadrado](https://designforai.dev/pt/snippet/btn-197.md): Botões, xs, micro, icon, square, ghost - [Escala de tons color-mix](https://designforai.dev/pt/snippet/btn-198.md): Botões, modern-css, color-mix, rounded, single-hue, fallback - [Tema automático light-dark](https://designforai.dev/pt/snippet/btn-199.md): Botões, modern-css, light-dark, rounded, theme-aware, fallback - [Squircle corner-shape](https://designforai.dev/pt/snippet/btn-200.md): Botões, modern-css, corner-shape, oklch, squircle, fallback - [Conteúdo discreto](https://designforai.dev/pt/snippet/card-001.md): Cards, content, basic, image-top, light, hover-lift - [Foto com tag](https://designforai.dev/pt/snippet/card-002.md): Cards, content, basic, image-top, tag, light - [Imagem com fade inferior](https://designforai.dev/pt/snippet/card-003.md): Cards, content, image-top, overlay, dark, gradient - [Rodapé com sombra suave](https://designforai.dev/pt/snippet/card-004.md): Cards, content, basic, footer, light, soft-shadow - [Zoom na imagem](https://designforai.dev/pt/snippet/card-005.md): Cards, content, basic, image-top, hover-zoom, light - [Mídia à esquerda](https://designforai.dev/pt/snippet/card-006.md): Cards, horizontal, media-left, light, hover-lift - [Linha com miniatura](https://designforai.dev/pt/snippet/card-007.md): Cards, horizontal, media-left, compact, list-item, light - [Barra de destaque escura](https://designforai.dev/pt/snippet/card-008.md): Cards, horizontal, media-left, dark, accent - [Mídia à direita](https://designforai.dev/pt/snippet/card-009.md): Cards, horizontal, media-right, light, split - [Avatar centralizado](https://designforai.dev/pt/snippet/card-010.md): Cards, profile, avatar, centered, light, cta - [Perfil com banner e stats](https://designforai.dev/pt/snippet/card-011.md): Cards, profile, avatar, banner, stats, light - [Linha de membro da equipe](https://designforai.dev/pt/snippet/card-012.md): Cards, profile, avatar, horizontal, socials, light - [Perfil com ponto de status](https://designforai.dev/pt/snippet/card-013.md): Cards, profile, avatar, dark, status, glow - [Crachá com avatar quadrado](https://designforai.dev/pt/snippet/card-014.md): Cards, profile, id-card, mono, minimal, light - [Preço clássico](https://designforai.dev/pt/snippet/card-015.md): Cards, pricing, feature-list, cta, light - [Plano pro em destaque](https://designforai.dev/pt/snippet/card-016.md): Cards, pricing, featured, badge, dark, gradient - [Preço em linhas](https://designforai.dev/pt/snippet/card-017.md): Cards, pricing, minimal, mono, light, hover-border - [Divisor em camadas](https://designforai.dev/pt/snippet/card-018.md): Cards, pricing, tiered, accent, light, shadow - [Preço por assento](https://designforai.dev/pt/snippet/card-019.md): Cards, pricing, compact, per-seat, light, badge - [Badge e adicionar ao carrinho](https://designforai.dev/pt/snippet/card-020.md): Cards, product, ecommerce, badge, price, light, hover-lift - [Adicionar deslizando](https://designforai.dev/pt/snippet/card-021.md): Cards, product, ecommerce, hover-reveal, minimal, light - [Avaliação e amostras de cor](https://designforai.dev/pt/snippet/card-022.md): Cards, product, ecommerce, rating, swatches, light - [Fita de desconto](https://designforai.dev/pt/snippet/card-023.md): Cards, product, ecommerce, dark, ribbon, discount - [Linha de carrinho](https://designforai.dev/pt/snippet/card-024.md): Cards, product, cart-item, horizontal, quantity, light - [Aspas grandes](https://designforai.dev/pt/snippet/card-025.md): Cards, testimonial, quote, light, serif - [Citação escura com estrelas](https://designforai.dev/pt/snippet/card-026.md): Cards, testimonial, quote, dark, stars, avatar - [Citação com barra de destaque](https://designforai.dev/pt/snippet/card-027.md): Cards, testimonial, quote, accent, light, logo - [Vidro fosco](https://designforai.dev/pt/snippet/card-028.md): Cards, glass, glassmorphism, blur, gradient, light - [Vidro noturno com bolhas](https://designforai.dev/pt/snippet/card-029.md): Cards, glass, glassmorphism, dark, blur, highlight - [Relevo suave](https://designforai.dev/pt/snippet/card-030.md): Cards, neumorphic, soft-ui, light, embossed, button - [Estatística em relevo escuro](https://designforai.dev/pt/snippet/card-031.md): Cards, neumorphic, soft-ui, dark, stat, embossed - [Brutalista com sombra dura](https://designforai.dev/pt/snippet/card-032.md): Cards, brutalist, neo-brutalist, hard-shadow, thick-border, light - [Pôster com etiqueta](https://designforai.dev/pt/snippet/card-033.md): Cards, brutalist, neo-brutalist, image-top, sticker, hard-shadow - [Borda cônica giratória](https://designforai.dev/pt/snippet/card-034.md): Cards, gradient-border, conic, animated, dark, property - [Borda em gradiente recortada](https://designforai.dev/pt/snippet/card-035.md): Cards, gradient-border, background-clip, light, hover-shift - [Elevação com brilho colorido](https://designforai.dev/pt/snippet/card-036.md): Cards, hover-lift, glow, image-top, light, shadow - [Inclinação em perspectiva](https://designforai.dev/pt/snippet/card-037.md): Cards, 3d, tilt, perspective, hover, dark, shine - [Virar no hover](https://designforai.dev/pt/snippet/card-038.md): Cards, flip, 3d, hover, two-sided, light - [Toque para virar](https://designforai.dev/pt/snippet/card-039.md): Cards, flip, 3d, toggle, checkbox, no-js, dark - [Legenda deslizante](https://designforai.dev/pt/snippet/card-040.md): Cards, image, overlay, hover-reveal, caption, slide-up - [Overlay escurecido](https://designforai.dev/pt/snippet/card-041.md): Cards, image, overlay, hover-reveal, icon, dark, zoom - [Blocos de estatísticas bento](https://designforai.dev/pt/snippet/card-042.md): Cards, bento, grid, tiles, layout, light - [Bloco bento pontilhado](https://designforai.dev/pt/snippet/card-043.md): Cards, bento, feature, pattern, dots, light - [Toast de sucesso](https://designforai.dev/pt/snippet/card-044.md): Cards, toast, notification, success, light, icon - [Toast de erro com contagem](https://designforai.dev/pt/snippet/card-045.md): Cards, toast, notification, error, dark, progress, animated - [Linha do tempo de releases](https://designforai.dev/pt/snippet/card-046.md): Cards, timeline, steps, list, light, dots - [Assistente em etapas](https://designforai.dev/pt/snippet/card-047.md): Cards, steps, progress, wizard, light, numbered - [Tema do sistema](https://designforai.dev/pt/snippet/card-048.md): Cards, dark-mode, theme, tokens, media-query, adaptive - [Cores light-dark](https://designforai.dev/pt/snippet/card-049.md): Cards, dark-mode, theme, light-dark, color-scheme, modern-css - [Skeleton com reflexo](https://designforai.dev/pt/snippet/card-050.md): Cards, skeleton, loading, shimmer, placeholder, animated - [Linha skeleton pulsante](https://designforai.dev/pt/snippet/card-051.md): Cards, skeleton, loading, pulse, list-item, placeholder - [Download de arquivo](https://designforai.dev/pt/snippet/card-052.md): Cards, file, download, document, light, icon - [Área de upload](https://designforai.dev/pt/snippet/card-053.md): Cards, file, upload, dropzone, dashed, light, hover - [Prévia de link](https://designforai.dev/pt/snippet/card-054.md): Cards, link-preview, og, bookmark, image-top, light - [Chip de link com favicon](https://designforai.dev/pt/snippet/card-055.md): Cards, link-preview, compact, inline, favicon, light - [Data grande](https://designforai.dev/pt/snippet/card-056.md): Cards, event, date, calendar, big-number, light - [Faixa de horário](https://designforai.dev/pt/snippet/card-057.md): Cards, event, date, dark, time-strip, cta - [Player de música](https://designforai.dev/pt/snippet/card-058.md): Cards, music, player, media, dark, progress, controls - [Equalizador tocando agora](https://designforai.dev/pt/snippet/card-059.md): Cards, music, now-playing, mini, equalizer, animated, light - [Pílula de variação](https://designforai.dev/pt/snippet/card-060.md): Cards, stat, kpi, metric, delta, light, dashboard - [Estatística com sparkline](https://designforai.dev/pt/snippet/card-061.md): Cards, stat, kpi, sparkline, chart, light, svg - [Estatística com anel](https://designforai.dev/pt/snippet/card-062.md): Cards, stat, kpi, progress, ring, conic, light - [Recurso com ícone em bloco](https://designforai.dev/pt/snippet/card-063.md): Cards, feature, icon, light, marketing, hover-lift - [Ícone em gradiente](https://designforai.dev/pt/snippet/card-064.md): Cards, feature, icon, dark, gradient, arrow, hover - [Blog com autor](https://designforai.dev/pt/snippet/card-065.md): Cards, blog, article, meta, avatar, image-top, light - [Linha de ensaio editorial](https://designforai.dev/pt/snippet/card-066.md): Cards, blog, article, editorial, serif, horizontal, meta - [Enterprise em duas colunas](https://designforai.dev/pt/snippet/card-067.md): Cards, pricing, enterprise, feature-list, cta, light, gradient-top - [Anel gradiente com habilidades](https://designforai.dev/pt/snippet/card-068.md): Cards, profile, avatar, gradient-ring, tags, light, hover - [Pilha com container query](https://designforai.dev/pt/snippet/card-069.md): Cards, container-query, responsive, modern-css, adaptive, light - [Marcar para selecionar](https://designforai.dev/pt/snippet/card-070.md): Cards, has, selectable, checkbox, state, modern-css, light - [Seletor de plano com radio](https://designforai.dev/pt/snippet/card-071.md): Cards, has, radio, pricing, selectable, state, light - [Linha alinhada com subgrid](https://designforai.dev/pt/snippet/card-072.md): Cards, subgrid, grid, aligned, layout, modern-css, light - [Cantos squircle](https://designforai.dev/pt/snippet/card-073.md): Cards, corner-shape, squircle, modern-css, fallback, light - [Ingresso chanfrado](https://designforai.dev/pt/snippet/card-074.md): Cards, corner-shape, bevel, ticket, modern-css, fallback, dark - [Cartão de embarque recortado](https://designforai.dev/pt/snippet/card-075.md): Cards, ticket, notches, mask, dashed, light - [Cupom com código tracejado](https://designforai.dev/pt/snippet/card-076.md): Cards, coupon, discount, dashed, promo, light - [Post de rede social](https://designforai.dev/pt/snippet/card-077.md): Cards, social, post, feed, avatar, actions, light - [Thread de comentários](https://designforai.dev/pt/snippet/card-078.md): Cards, comment, thread, nested, avatar, light - [Balões de chat](https://designforai.dev/pt/snippet/card-079.md): Cards, chat, messages, bubbles, dark, conversation - [Widget de clima](https://designforai.dev/pt/snippet/card-080.md): Cards, weather, widget, gradient, big-number, svg, light - [Receita com chips](https://designforai.dev/pt/snippet/card-081.md): Cards, recipe, food, chips, image-top, light - [Vaga de emprego](https://designforai.dev/pt/snippet/card-082.md): Cards, job, listing, tags, logo, light, hover - [Progresso do curso](https://designforai.dev/pt/snippet/card-083.md): Cards, course, learning, progress, image-top, light - [Tarefa marcada](https://designforai.dev/pt/snippet/card-084.md): Cards, task, todo, checkbox, has, state, light - [Nota adesiva](https://designforai.dev/pt/snippet/card-085.md): Cards, sticky-note, paper, rotated, handwritten, yellow - [Moldura polaroid](https://designforai.dev/pt/snippet/card-086.md): Cards, photo, polaroid, frame, rotated, light, caption - [Cartão de pagamento brilhante](https://designforai.dev/pt/snippet/card-087.md): Cards, payment, credit-card, dark, gradient, chip, glossy - [Baralho em leque](https://designforai.dev/pt/snippet/card-088.md): Cards, stack, deck, layered, hover, light, playful - [Holofote no canto](https://designforai.dev/pt/snippet/card-089.md): Cards, spotlight, glow, radial, hover, dark, subtle - [Gradiente à deriva](https://designforai.dev/pt/snippet/card-090.md): Cards, gradient, animated, keyframes, colorful, cta - [Granulação de papel](https://designforai.dev/pt/snippet/card-091.md): Cards, texture, grain, noise, svg, warm, editorial - [Borda de tubo neon](https://designforai.dev/pt/snippet/card-092.md): Cards, neon, glow, dark, cyberpunk, border-glow, hover - [Placeholder de adicionar](https://designforai.dev/pt/snippet/card-093.md): Cards, placeholder, add-new, dashed, empty-state, light - [Mini citação com logo](https://designforai.dev/pt/snippet/card-094.md): Cards, testimonial, logo, mini, quote, light, row - [Changelog de versão](https://designforai.dev/pt/snippet/card-095.md): Cards, changelog, release, version, badge, list, light - [Métricas antes e depois](https://designforai.dev/pt/snippet/card-096.md): Cards, comparison, two-column, metrics, light, versus - [Linha de loja de apps](https://designforai.dev/pt/snippet/card-097.md): Cards, app, install, icon, rating, light, row - [Miniatura com play](https://designforai.dev/pt/snippet/card-098.md): Cards, video, thumbnail, play, duration, dark, hover - [Endereço com pino](https://designforai.dev/pt/snippet/card-099.md): Cards, location, map, pin, svg, address, light - [Inscrição em newsletter](https://designforai.dev/pt/snippet/card-100.md): Cards, newsletter, form, input, cta, dark, gradient ## Prateleiras - [Botões pill](https://designforai.dev/pt/buttons/pill): Botões totalmente arredondados para chips, filtros, toggles e o ocasional contador de compartilhamentos: contorno, sólido, dois tons e vidro. Copie o CSS, ou o prompt que reconstrói um deles na sua ferramenta de código com IA. - [Botões de contorno](https://designforai.dev/pt/buttons/outline): Botões de contorno e ghost: bordas finas, tracejadas, duplas e com preenchimento no hover, para a ação secundária que não precisa gritar. - [Botões com gradiente](https://designforai.dev/pt/buttons/gradient): Preenchimentos e bordas em gradiente, incluindo bordas cônicas que giram com @property e lavagens mesh que continuam legíveis. - [Botões com ícone](https://designforai.dev/pt/buttons/icon): Botões que carregam um SVG inline: setas que se deslocam, sinais de mais que giram, downloads que preenchem, todos com rótulo acessível. - [Botões animados](https://designforai.dev/pt/buttons/animated): Shimmers, spinners, preenchimentos de progresso e pulsos, cada um com a proteção de prefers-reduced-motion já incluída no CSS copiado. - [Botões sólidos](https://designforai.dev/pt/buttons/solid): Botões chapados, preenchidos com uma cor só e com estados de hover, focus e active bem feitos. A prateleira que segura o trabalho pesado. - [Botões 3D](https://designforai.dev/pt/buttons/3d): Botões com borda física: estados pressionados, chanfros, faces em queda e inclinação, feitos com box-shadow e translate, sem imagens. - [Botões de vidro](https://designforai.dev/pt/buttons/glass): Preenchimentos translúcidos, backdrop blur e bordas de luz. Só funcionam sobre cor, então cada demo traz o próprio fundo e um fallback sólido. - [Botões neumórficos](https://designforai.dev/pt/buttons/neumorphic): Botões de soft UI que se erguem da página com uma sombra clara e uma escura, e afundam ao pressionar. - [Botões brutalistas](https://designforai.dev/pt/buttons/brutalist): Bordas grossas, sombras deslocadas duras, raio zero e preenchimentos berrantes. O botão entra na própria sombra quando pressionado. - [Botões escuros](https://designforai.dev/pt/buttons/dark): Botões pensados para interfaces escuras: preenchimentos de tinta, bordas finas e brilhos que se leem sobre o quase preto. - [Botões neon](https://designforai.dev/pt/buttons/neon): Contornos de tubo, halos de brilho e cintilação, mantidos legíveis com uma cor de texto sólida sob o brilho. - [Cards de preço](https://designforai.dev/pt/cards/pricing): Planos, um plano em destaque, listas de recursos e um CTA, cada um copiável por si só. - [Cards de perfil](https://designforai.dev/pt/cards/profile): Avatar, nome, cargo e um status ou ação de seguir, do crachá em mono ao arredondado suave. - [Cards de imagem](https://designforai.dev/pt/cards/image): Cards guiados por uma foto: imagem no topo, capas sangradas e texto sobre um fade ou um overlay escurecido. - [Cards horizontais](https://designforai.dev/pt/cards/horizontal): Mídia de um lado, texto do outro, para listas, feeds e resultados de busca. - [Cards com hover](https://designforai.dev/pt/cards/hover): Cards que reagem ao hover: elevações, flips, reveals e mudanças de borda, cada um com proteção de reduced-motion. - [Cards escuros](https://designforai.dev/pt/cards/dark): Cards para interfaces escuras: superfícies elevadas, bordas finas e brilhos sobre o quase preto. ## Estilos - [Glassmorphism](https://designforai.dev/pt/style/glassmorphism.md): UI de vidro fosco, cards de vidro, UI com backdrop blur, UI translúcida - [Liquid glass](https://designforai.dev/pt/style/liquid-glass.md): Apple liquid glass, vidro do iOS 26, UI refrativa, vidro com efeito de lente - [Neumorphism](https://designforai.dev/pt/style/neumorphism.md): soft UI, neomorfismo, UI extrudada, UI de sombras suaves - [Claymorphism](https://designforai.dev/pt/style/claymorphism.md): clay UI, argila 3D, UI inflada, UI fofinha - [Neobrutalismo](https://designforai.dev/pt/style/neo-brutalism.md): neubrutalism, web neobrutalista, estilo Gumroad, UI de bordas grossas - [Brutalismo clássico](https://designforai.dev/pt/style/classic-brutalism.md): web crua, sites brutalistas, anti-design, estética de HTML padrão, brutalismo web 1.0 - [Estilo suíço / tipográfico internacional](https://designforai.dev/pt/style/swiss-international-typographic-style.md): estilo suíço, International Style, design de grade, design Helvetica, estilo Müller-Brockmann - [Editorial / revista](https://designforai.dev/pt/style/editorial-magazine.md): design editorial, layout de revista, jornal na web, editorial long-form - [Minimalismo](https://designforai.dev/pt/style/minimalism.md): web design minimalista, menos é mais, UI limpa, design de espaço em branco - [Maximalismo](https://designforai.dev/pt/style/maximalism.md): web maximalista, mais é mais, anti-minimalismo, design de sobrecarga visual - [Bento grid](https://designforai.dev/pt/style/bento-grid.md): layout bento box, UI bento, grade de keynote da Apple, tiles de grade de recursos - [Midnight SaaS](https://designforai.dev/pt/style/midnight-saas.md): estilo Linear, SaaS escuro, landing de desenvolvedor em dark mode, UI de produto escura, visual Raycast - [Terminal / hacker](https://designforai.dev/pt/style/terminal-hacker.md): estética hacker, UI de CLI, site de linha de comando, tela verde, estilo TUI - [Pixel retrô / 8-bit](https://designforai.dev/pt/style/retro-pixel-8-bit.md): UI pixel art, design 8-bit, estilo NES, 16-bit, UI de jogo retrô - [Y2K / Frutiger Aero](https://designforai.dev/pt/style/y2k-frutiger-aero.md): web Y2K, Frutiger Aero, aero glass, estilo Windows Vista, futurismo dos anos 2000, UI de bolhas - [Vaporwave](https://designforai.dev/pt/style/vaporwave.md): estética vaporwave, web a e s t h e t i c, adjacente ao synthwave, retrô Windows 95 - [Cyberpunk / neon](https://designforai.dev/pt/style/cyberpunk-neon.md): UI cyberpunk, UI neon, synthwave, design glitch, night city - [Memphis](https://designforai.dev/pt/style/memphis.md): design Memphis, estilo Memphis Group, pós-moderno anos 80, design de rabiscos - [Bauhaus](https://designforai.dev/pt/style/bauhaus.md): design Bauhaus, web Bauhaus, modernismo geométrico, design de cores primárias - [Art Deco](https://designforai.dev/pt/style/art-deco.md): Art Deco web, estilo Gatsby, luxo dos anos 1920, luxo geométrico, dourado deco - [Flat 2.0](https://designforai.dev/pt/style/flat-2-0.md): flat design 2.0, semi-flat, quase flat, flat com sombras, Material-lite - [Material 3 Expressive](https://designforai.dev/pt/style/material-3-expressive.md): Material You, Material Design 3, M3 Expressive, estilo Android 16, cor dinâmica - [Esqueumorfismo](https://designforai.dev/pt/style/skeuomorphism.md): design esqueumórfico, UI realista, estilo iOS 6, UI de couro e linho, revival esqueumórfico - [Papel / caderno](https://designforai.dev/pt/style/paper-notebook.md): UI de caderno, design de papel pautado, web de sketchbook, UI de post-it, estilo papelaria - [Minimal quente papel creme](https://designforai.dev/pt/style/cream-paper-warm-minimal.md): minimalismo quente, minimal creme, UI bege, minimal aconchegante, design papel-branco, web de luxo discreto - [Corporate Memphis (estilo de ilustração)](https://designforai.dev/pt/style/corporate-memphis.md): estilo Alegria, ilustração de big tech, ilustração de pessoas flat, estilo de ilustração do Facebook, globohomo (pejorativo) - [Monocromático preto e branco](https://designforai.dev/pt/style/monochrome-black-and-white.md): web design preto e branco, UI monocromática, design acromático, design sem cor, site em escala de cinza - [Acessibilidade de alto contraste](https://designforai.dev/pt/style/high-contrast-accessibility.md): design acessível, design WCAG AAA, modo de alto contraste, UI inclusiva, a11y-first - [UI pastel suave](https://designforai.dev/pt/style/pastel-soft-ui.md): design pastel, UI pastel suave, UI de bala, UI sonhadora, estética soft, kawaii-lite - [Gradiente mesh / aurora](https://designforai.dev/pt/style/gradient-mesh-aurora.md): mesh gradient, fundo aurora, manchas de gradiente, UI aurora boreal, gradiente da Stripe - [Vidro + granulado](https://designforai.dev/pt/style/glass-noise-grain.md): vidro granulado, UI de grão fosco, UI de gradiente com ruído, web com grão de filme, vidro texturizado - [Desenhado à mão / sketch](https://designforai.dev/pt/style/hand-drawn-sketch.md): UI esboçada, design doodle, site desenhado à mão, UI trêmula, estilo Excalidraw - [Zine / colagem](https://designforai.dev/pt/style/zine-collage.md): design de zine, colagem punk, web recorta-e-cola, estética DIY, estilo xerox, estilo riso - [Minimalismo japonês (ma)](https://designforai.dev/pt/style/japanese-minimal.md): minimalismo japonês, design ma, web wabi-sabi, UI zen, estilo Muji, kanso - [Escandinavo](https://designforai.dev/pt/style/scandinavian.md): design escandinavo, minimalismo nórdico, web hygge, nórdico limpo, moderno dinamarquês - [Industrial / blueprint / engenharia](https://designforai.dev/pt/style/industrial-blueprint-engineering.md): design blueprint, UI de engenharia, estilo de desenho técnico, estética CAD, web esquemática - [Luxo / serifa de moda](https://designforai.dev/pt/style/luxury-fashion-serif.md): web design de luxo, editorial de moda, site de marca high-end, web de alta-costura, luxo discreto - [Arredondado lúdico (estilo Duolingo)](https://designforai.dev/pt/style/playful-rounded.md): estilo Duolingo, UI lúdica robusta, UI de botão 3D, UI gamificada, design arredondado amigável - [Infantil / livro de histórias](https://designforai.dev/pt/style/kids-storybook.md): web design infantil, UI de livro de histórias, estilo de livro ilustrado, design de app infantil, site de ilustração lúdica - [Retrofuturismo](https://designforai.dev/pt/style/retro-futurism.md): retrofuturismo, design da era atômica, UI da era espacial, futuro dos anos 1950, estilo Jetsons, futurismo mid-century - [HUD sci-fi](https://designforai.dev/pt/style/sci-fi-hud.md): UI de HUD, FUI (UI fictícia), heads-up display, interface de nave espacial, UI do Homem de Ferro, UI holográfica - [Formas orgânicas / blobs](https://designforai.dev/pt/style/organic-blob-shapes.md): design de blobs, UI de formas orgânicas, formas fluidas, formas de ameba, blobs que se transformam, web biomórfica - [Só tipografia](https://designforai.dev/pt/style/typographic-only.md): design guiado por tipografia, typography-first, site só de texto, design sem imagem, tipografia como imagem - [Guiado por fotografia](https://designforai.dev/pt/style/photography-led.md): design photo-first, site guiado por imagem, fotografia full-bleed, site de narrativa visual, lookbook - [Cinético / motion-first](https://designforai.dev/pt/style/kinetic-motion-first.md): web de motion design, site de tipografia cinética, site animado, design guiado por scroll, estilo awwwards - [E-ink / calmo de baixo contraste](https://designforai.dev/pt/style/e-ink-low-contrast-calm.md): UI e-ink, design de tecnologia calma, UI de baixo contraste, estilo de tela de papel, modo leitura, estilo Kindle - [Dashboard / denso em dados](https://designforai.dev/pt/style/dashboard-data-dense.md): UI densa em dados, design de dashboard admin, UI de analytics, estilo terminal Bloomberg, UI enterprise densa, estilo Tufte - [Governamental / institucional limpo](https://designforai.dev/pt/style/government-institutional-clean.md): design system governamental, estilo GOV.UK, USWDS, design cívico, UI de setor público, web institucional - [Neo-grotesca tech](https://designforai.dev/pt/style/neo-grotesque-tech.md): estilo grotesk tech, Helvetica tech, estilo tipográfico Stripe-Vercel, grotesca de marca de desenvolvedor, SaaS modernista - [Brilho gradiente de startup de IA (o visual slop padrão)](https://designforai.dev/pt/style/ai-startup-gradient-glow.md): estilo de landing page de IA, SaaS de gradiente roxo, estética genérica de IA, brilho gradiente em dark mode, visual padrão do v0, design AI slop ## Novo em CSS - [Container queries (size) + cqi/cqw units](https://designforai.dev/pt/css/container-queries.md): Baseline 2023 (Chrome 105, Safari 16, Firefox 110); amplamente disponível desde 2025. Queries só por nome (sem condição de tamanho) são Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). - [:has() relational selector](https://designforai.dev/pt/css/has-relational-selector.md): Baseline 2023 (Chrome 105, Safari 15.4, Firefox 121); amplamente disponível. - [CSS nesting](https://designforai.dev/pt/css/nesting.md): Baseline 2023 (Chrome 120 sintaxe relaxada, Safari 17.2, Firefox 117); amplamente disponível. - [Cascade layers (@layer)](https://designforai.dev/pt/css/cascade-layers.md): Baseline 2022 (Chrome 99, Safari 15.4, Firefox 97); amplamente disponível. - [Subgrid](https://designforai.dev/pt/css/subgrid.md): Baseline 2023 (Chrome 117, Safari 16, Firefox 71); amplamente disponível. - [color-mix()](https://designforai.dev/pt/css/color-mix.md): Baseline 2023 (Chrome 111, Safari 16.2, Firefox 113). Omitir o espaço de cor usa oklab por padrão (Safari 26.2, Chrome, Firefox); mais de duas cores é mais recente (Chrome 150, Firefox 150). - [oklch() / oklab() colors](https://designforai.dev/pt/css/oklch.md): Baseline 2023 (Chrome 111, Safari 15.4, Firefox 113); amplamente disponível. - [Relative color syntax (from)](https://designforai.dev/pt/css/relative-color-syntax.md): Baseline 2024 (Chrome 119, Safari 16.4, Firefox 128). - [light-dark()](https://designforai.dev/pt/css/light-dark.md): Baseline 2024 (Chrome 123, Safari 17.5, Firefox 120). Valores de imagem em light-dark() são mais recentes (Chrome 150, Firefox 150). - [@property (registered custom properties)](https://designforai.dev/pt/css/property.md): Baseline 2024 (Chrome 85, Safari 16.4, Firefox 128). - [text-wrap: balance](https://designforai.dev/pt/css/text-wrap.md): Baseline 2024 (Chrome 114, Safari 17.5, Firefox 121). - [Popover attribute + ::backdrop](https://designforai.dev/pt/css/popover-attribute.md): Baseline 2024 (Chrome 114, Safari 17, Firefox 125). `popover="hint"` ainda não é Baseline (veja fx-042). - [ improvements (closedby, :modal, requestClose)](https://designforai.dev/pt/css/dialog-improvements.md): `` + `:modal` Baseline 2022. Atributo `closedby`: Chrome 134, Firefox 137; Safari pendente (item do Interop 2026), então não é Baseline em 2026-09. - [@starting-style + transition-behavior: allow-discrete](https://designforai.dev/pt/css/starting-style.md): Baseline 2024 (Chrome 117, Safari 17.5, Firefox 129). - [inert attribute](https://designforai.dev/pt/css/inert-attribute.md): Baseline 2023 (Chrome 102, Safari 15.5, Firefox 112); amplamente disponível. - [:user-valid / :user-invalid](https://designforai.dev/pt/css/user-valid-user-invalid.md): Baseline 2023 (Chrome 119, Safari 16.5, Firefox 88); `:user-invalid` amplamente disponível desde maio de 2026. - [accent-color](https://designforai.dev/pt/css/accent-color.md): Baseline 2022 (Chrome 93, Safari 15.4, Firefox 92); amplamente disponível. O Safari 26.2 adicionou ajuste automático de legibilidade. - [Stepped value functions: round(), mod(), rem(), abs(), sign()](https://designforai.dev/pt/css/stepped-value-functions.md): Baseline 2024 (round/mod/rem: Chrome 125, Safari 15.4, Firefox 118; abs/sign: Chrome 125, Safari 15.4, Firefox 118). - [Trigonometric functions: sin(), cos(), tan(), atan2()](https://designforai.dev/pt/css/trigonometric-functions.md): Baseline 2023 (Chrome 111, Safari 15.4, Firefox 108); amplamente disponível. - [animation-composition](https://designforai.dev/pt/css/animation-composition.md): Baseline 2023 (Chrome 112, Safari 16, Firefox 115). - [offset-path with shapes (motion path)](https://designforai.dev/pt/css/offset-path.md): Baseline 2024 para `offset-path` com formas básicas e coord-box (Chrome 116, Safari 16, Firefox 122). `shape()` em offset-path é Baseline 2026 (fx-033). - [CSS masking (mask, mask-image, mask-composite) unprefixed](https://designforai.dev/pt/css/masking.md): Baseline 2023 (Chrome 120, Safari 15.4, Firefox 53); amplamente disponível. - [backdrop-filter](https://designforai.dev/pt/css/backdrop-filter.md): Baseline 2024 (Chrome 76, Safari 18 sem prefixo, Firefox 103). - [scrollbar-gutter, scrollbar-width, scrollbar-color](https://designforai.dev/pt/css/scrollbar-gutter.md): scrollbar-gutter Baseline 2024 (Chrome 94, Safari 18.2, Firefox 97). scrollbar-width Baseline 2024 (Safari 18.2). scrollbar-color recém disponível (Chrome 121, Firefox 64, Safari 26.2). - [Exclusive accordions (details name=) + ::details-content](https://designforai.dev/pt/css/exclusive-accordions.md): Atributo `name` Baseline 2024 (Chrome 120, Safari 17.2, Firefox 130). `::details-content` Baseline 2025 (Chrome 131, Safari 18.4, Firefox 144). - [Custom Highlight API (::highlight()) + ::target-text](https://designforai.dev/pt/css/custom-highlight-api.md): Custom highlights Baseline 2025 (Chrome 105, Safari 17.2, Firefox 140). `::target-text` Baseline 2025 (Chrome 89, Safari 18.2, Firefox 131). - [View transitions, same document (document.startViewTransition)](https://designforai.dev/pt/css/view-transitions.md): Baseline 2025 (Chrome 111, Safari 18, Firefox 144). `:active-view-transition` Baseline em janeiro de 2026. Tipos de view transition: Chrome 125, Safari 18.2, Firefox 147. - [:open pseudo-class](https://designforai.dev/pt/css/open-pseudo-class.md): Baseline 2026 recém disponível (Chrome 133, Firefox 136, Safari 26.5). - [Container style queries (custom properties)](https://designforai.dev/pt/css/container-style-queries.md): Baseline 2026 (Chrome 111, Safari 18, Firefox 151 em maio de 2026). A sintaxe de intervalo para style() ainda está atrás de flag no Firefox. - [@scope](https://designforai.dev/pt/css/scope.md): Baseline 2026 (Chrome 118, Safari 17.4, Firefox 146 em dezembro de 2025). - [field-sizing: content](https://designforai.dev/pt/css/field-sizing.md): Baseline 2026 (Chrome 123, Safari 26.2, Firefox 152 em junho de 2026). - [contrast-color()](https://designforai.dev/pt/css/contrast-color.md): Baseline 2026 recém disponível em abril de 2026 (Chrome 147, Firefox 146, Safari 26). - [shape() for clip-path / offset-path](https://designforai.dev/pt/css/shape.md): Baseline 2026 (Chrome 135, Safari 18.4, Firefox 148 em fevereiro de 2026). O Chrome 149 também permite em `shape-outside`. - [sibling-index() and sibling-count()](https://designforai.dev/pt/css/sibling-index.md): Baseline 2026 (Chrome 138, Safari 26.2, Firefox 154 em agosto de 2026). - [text-box-trim / text-box-edge (text-box shorthand)](https://designforai.dev/pt/css/text-box-trim.md): Baseline 2026 (Chrome 133, Safari 18.2, Firefox 154 em agosto de 2026). - [Anchor positioning: anchor(), position-area, position-try](https://designforai.dev/pt/css/anchor-positioning.md): Baseline 2026 recém disponível (Chrome 125, Safari 26.0, Firefox 147 em janeiro de 2026). Refinamentos continuam chegando (Firefox 148 position-try-order, Safari 26.2 flip-x/flip-y e position-visibility, Chrome 151/Safari 27 position-anchor: normal). Nota: `inset-area` foi renomeado para `position-area`; use o nome novo. - [Name-only container queries + comma-separated queries](https://designforai.dev/pt/css/name-only-container-queries.md): Queries só por nome Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). Listas de query `@container` separadas por vírgula: Chrome 150. - [lh / rlh units (and rcap, rch, rex, ric)](https://designforai.dev/pt/css/lh.md): `lh`/`rlh` Baseline amplamente disponível em maio de 2026 (Chrome 109, Safari 16.4, Firefox 120). `rcap`/`rch`/`rex`/`ric` Baseline 2026 (Firefox 147). - [Scroll-driven animations (animation-timeline: scroll() / view())](https://designforai.dev/pt/css/scroll-driven-animations.md): Chrome 115, Safari 26.0; Firefox atrás de `layout.css.scroll-driven-animations.enabled` no stable, habilitado no Firefox 158 Nightly (segundo o caniuse). Área de foco do Interop 2026; Baseline esperado para o fim de 2026. - [Cross-document view transitions (@view-transition)](https://designforai.dev/pt/css/cross-document-view-transitions.md): Chrome 126, Safari 18.2; Firefox ainda não (caniuse até o 158). Área de foco do Interop 2026. - [text-wrap: pretty](https://designforai.dev/pt/css/text-wrap-2.md): Chrome 117, Safari 26.0 (algoritmo melhorado); Firefox ainda não (caniuse até o 158). - [popover="hint"](https://designforai.dev/pt/css/popover-hint.md): Chrome 133, Firefox 149; Safari pendente (item do Interop 2026), não é Baseline. - [dialog closedby="any" (light-dismiss dialogs)](https://designforai.dev/pt/css/dialog-closedby-any.md): Chrome 134, Firefox 137; Safari ainda não (bloqueado desde julho de 2025, item do Interop 2026). - [color-mix() with many colors + light-dark() for images](https://designforai.dev/pt/css/color-mix-2.md): Chrome 150, Firefox 150 (ambos em 2026); Safari pendente para os dois. - [margin-trim](https://designforai.dev/pt/css/margin-trim.md): Safari 16.4 (block; `block inline` no 26.0); Chrome 155 (segundo o caniuse, ainda não stable em 2026-09); Firefox ainda não. Não é Baseline. - [Standard line-clamp (unprefixed) and -webkit-line-clamp](https://designforai.dev/pt/css/standard-line-clamp.md): `-webkit-line-clamp` (com `display:-webkit-box`) funciona em todo lugar. `line-clamp` sem prefixo: atrás de flags no Chrome e no Firefox (Firefox 154 `layout.css.line-clamp.enabled`), o Safari suporta a sintaxe legada. Não é Baseline. - [CSS Typed OM (CSSStyleValue, attributeStyleMap, CSS.px)](https://designforai.dev/pt/css/typed-om.md): Chrome 66, Safari 16.4; Firefox atrás de flag (Nightly a partir do 154, agosto de 2026). Não é Baseline. - [revert-rule keyword](https://designforai.dev/pt/css/revert-rule-keyword.md): Chrome 148, Firefox 150, Safari 27 beta. Ainda não é Baseline (esperado para o fim de 2026). - [interpolate-size / calc-size() (animate to height:auto)](https://designforai.dev/pt/css/interpolate-size.md): Só Chrome 129; Firefox e Safari ainda não (2026-09). Não é Baseline. - [corner-shape (squircle, scoop, notch, bevel, superellipse())](https://designforai.dev/pt/css/corner-shape.md): Só Chrome 139; Safari e Firefox sem cronograma público (2026-09). Não é Baseline. - [CSS if() conditional function](https://designforai.dev/pt/css/if.md): Só Chrome 137; Safari Technology Preview 249 (julho de 2026), Firefox em desenvolvimento. Não é Baseline. - [@function custom functions](https://designforai.dev/pt/css/function-custom-functions.md): Só Chrome 139; Safari Technology Preview 249, Firefox em desenvolvimento. Não é Baseline. - [reading-flow / reading-order](https://designforai.dev/pt/css/reading-flow.md): Só Chrome 137; Safari e Firefox ainda não (2026-09). Não é Baseline. - [CSS carousels: ::scroll-button(), ::scroll-marker(), ::scroll-marker-group](https://designforai.dev/pt/css/carousels.md): Só Chrome 135; Safari e Firefox ainda não (caniuse: sem suporte até o Safari 27 / Firefox 158). Não é Baseline. - [Scroll-state container queries (stuck, snapped, scrollable, scrolled)](https://designforai.dev/pt/css/scroll-state-container-queries.md): Chrome 133 (`scrolled` no Chrome 144); Safari e Firefox ainda não (2026-09). Não é Baseline. - [text-fit (fit-to-width headlines)](https://designforai.dev/pt/css/text-fit.md): Só Chrome 150 (junho de 2026). Não é Baseline. - [background-clip: border-area (gradient borders)](https://designforai.dev/pt/css/background-clip.md): Só Chrome 150 (junho de 2026). Não é Baseline. - [Gap decorations (column-rule / row-rule in grid and flex)](https://designforai.dev/pt/css/gap-decorations.md): Chrome 149 (junho de 2026). Não é Baseline. - [random() and progress() functions](https://designforai.dev/pt/css/random.md): `random()`: Safari 26.2 (refinado no 26.5 com `element-scoped`), Firefox atrás de flag; Chrome em desenvolvimento. `progress()`: Safari 26.0, Firefox 154 atrás de flag, Chrome em desenvolvimento. Não é Baseline. - [Grid Lanes (CSS-only masonry)](https://designforai.dev/pt/css/grid-lanes.md): Safari 26.4 (abril de 2026); Chrome, Edge e Firefox atrás de flags. Não é Baseline. - [Customizable