# designforai.dev (es) > Snippets CSS, estilos de diseño y funcionalidades nuevas de CSS, cada uno con un prompt escrito para herramientas de programación con IA. Cada página tiene un gemelo en markdown (misma URL con .md). ## Snippets - [Tinta plana](https://designforai.dev/es/snippet/btn-001.md): Botones, solid, flat, rectangle, subtle-lift - [Bloque cobalto](https://designforai.dev/es/snippet/btn-002.md): Botones, solid, flat, rectangle, brand-blue - [Menta suave](https://designforai.dev/es/snippet/btn-003.md): Botones, solid, flat, rounded, tinted-background - [Carmesí ancho](https://designforai.dev/es/snippet/btn-004.md): Botones, solid, flat, full-width, uppercase - [Pizarra cuadrado](https://designforai.dev/es/snippet/btn-005.md): Botones, solid, flat, square-corners, monochrome - [Girasol intenso](https://designforai.dev/es/snippet/btn-006.md): Botones, solid, flat, rounded, warm, dark-text - [Violeta con tracking](https://designforai.dev/es/snippet/btn-007.md): Botones, solid, flat, rounded, letter-spacing-hover - [Carbón micro](https://designforai.dev/es/snippet/btn-008.md): Botones, solid, flat, small, compact - [Contorno fino](https://designforai.dev/es/snippet/btn-009.md): Botones, outline, ghost, rectangle, thin-border - [Contorno con relleno](https://designforai.dev/es/snippet/btn-010.md): Botones, outline, rectangle, fill-on-hover, 2px-border - [Fantasma de texto](https://designforai.dev/es/snippet/btn-011.md): Botones, ghost, borderless, text-button, minimal - [Contorno discontinuo](https://designforai.dev/es/snippet/btn-012.md): Botones, outline, dashed, rectangle, add-action - [Contorno de línea doble](https://designforai.dev/es/snippet/btn-013.md): Botones, outline, double-border, editorial, square - [Fantasma borde hover](https://designforai.dev/es/snippet/btn-014.md): Botones, ghost, outline, rounded, border-appears - [Píldora rosa contorno](https://designforai.dev/es/snippet/btn-015.md): Botones, outline, pill, thin-border, tinted-hover - [Fantasma invertido (fondo oscuro)](https://designforai.dev/es/snippet/btn-016.md): Botones, ghost, outline, dark-background, white-border - [Píldora clásica](https://designforai.dev/es/snippet/btn-017.md): Botones, pill, solid, rounded, shadow-lift - [Píldora bicolor](https://designforai.dev/es/snippet/btn-018.md): Botones, pill, solid, two-tone, badge - [Píldora con anillo](https://designforai.dev/es/snippet/btn-019.md): Botones, pill, outline, ring-hover, rounded - [Squircle](https://designforai.dev/es/snippet/btn-020.md): Botones, rounded, solid, squircle, large-radius - [Píldora que encoge](https://designforai.dev/es/snippet/btn-021.md): Botones, pill, solid, scale, press - [Cápsula con punto](https://designforai.dev/es/snippet/btn-022.md): Botones, pill, status, indicator, pulse - [Radio asimétrico](https://designforai.dev/es/snippet/btn-023.md): Botones, rounded, solid, asymmetric, playful - [Degradado atardecer](https://designforai.dev/es/snippet/btn-024.md): Botones, gradient, solid, rounded, warm - [Cambio aurora](https://designforai.dev/es/snippet/btn-025.md): Botones, gradient, animated, background-position, rounded - [Borde degradado](https://designforai.dev/es/snippet/btn-026.md): Botones, gradient, outline, border-gradient, mask - [Fantasma con texto degradado](https://designforai.dev/es/snippet/btn-027.md): Botones, gradient, ghost, text-gradient, background-clip - [Océano profundo](https://designforai.dev/es/snippet/btn-028.md): Botones, gradient, solid, vertical, dark - [Punto radial](https://designforai.dev/es/snippet/btn-029.md): Botones, gradient, radial, hover-move, rounded - [Malla pastel](https://designforai.dev/es/snippet/btn-030.md): Botones, gradient, multi-layer, pastel, soft - [Oro metálico](https://designforai.dev/es/snippet/btn-031.md): Botones, gradient, metallic, shine, luxury - [Píldora de cristal esmerilado](https://designforai.dev/es/snippet/btn-032.md): Botones, glassmorphism, pill, blur, translucent - [Cristal oscuro](https://designforai.dev/es/snippet/btn-033.md): Botones, glassmorphism, dark, rounded, blur - [Cristal con borde luminoso](https://designforai.dev/es/snippet/btn-034.md): Botones, glassmorphism, glow, pill, border-gradient - [Botón de cristal claro](https://designforai.dev/es/snippet/btn-035.md): Botones, glassmorphism, light, rectangle, shadow - [Pestaña de cristal](https://designforai.dev/es/snippet/btn-036.md): Botones, glassmorphism, pill, small, tab-like - [Cristal con luz interior](https://designforai.dev/es/snippet/btn-037.md): Botones, glassmorphism, rounded, inner-gradient, premium - [Arcilla en relieve](https://designforai.dev/es/snippet/btn-038.md): Botones, neumorphic, soft-ui, raised, rounded - [Suave hundido](https://designforai.dev/es/snippet/btn-039.md): Botones, neumorphic, soft-ui, inset, rounded - [Icono circular suave](https://designforai.dev/es/snippet/btn-040.md): Botones, neumorphic, soft-ui, circle, icon - [Suave modo oscuro](https://designforai.dev/es/snippet/btn-041.md): Botones, neumorphic, soft-ui, dark, rounded - [Píldora suave con acento](https://designforai.dev/es/snippet/btn-042.md): Botones, neumorphic, soft-ui, pill, accent-text - [Chip suave conmutable](https://designforai.dev/es/snippet/btn-043.md): Botones, neumorphic, soft-ui, small, chip - [Neobrutal amarillo](https://designforai.dev/es/snippet/btn-044.md): Botones, brutalist, neo-brutalist, hard-shadow, square - [Píldora neobrutal rosa](https://designforai.dev/es/snippet/btn-045.md): Botones, brutalist, neo-brutalist, pill, hard-shadow - [Brutalista mono](https://designforai.dev/es/snippet/btn-046.md): Botones, brutalist, monospace, square, inverted-hover - [Neobrutal sombra de color](https://designforai.dev/es/snippet/btn-047.md): Botones, brutalist, neo-brutalist, coloured-shadow, rounded - [Brutalista a rayas](https://designforai.dev/es/snippet/btn-048.md): Botones, brutalist, pattern, stripes, square - [Neobrutal oscuro](https://designforai.dev/es/snippet/btn-049.md): Botones, brutalist, neo-brutalist, dark, hard-shadow - [Etiqueta brutalista](https://designforai.dev/es/snippet/btn-050.md): Botones, brutalist, small, tag, rotate - [Pulsación caramelo](https://designforai.dev/es/snippet/btn-051.md): Botones, 3d, press-down, rounded, bottom-edge - [Tecla de teclado](https://designforai.dev/es/snippet/btn-052.md): Botones, 3d, press-down, keyboard, square - [Arcade rojo](https://designforai.dev/es/snippet/btn-053.md): Botones, 3d, press-down, circle, arcade - [Inclinación al pulsar](https://designforai.dev/es/snippet/btn-054.md): Botones, 3d, perspective, tilt, hover-rotate - [Capas apiladas](https://designforai.dev/es/snippet/btn-055.md): Botones, 3d, layered, offset, retro - [Bisel cromado](https://designforai.dev/es/snippet/btn-056.md): Botones, 3d, bevel, chrome, retro - [Relleno brasa deslizante](https://designforai.dev/es/snippet/btn-057.md): Botones, hover-fill, slide-left, outline, rounded - [Relleno ascendente](https://designforai.dev/es/snippet/btn-058.md): Botones, hover-fill, slide-up, outline, square - [Florecer central](https://designforai.dev/es/snippet/btn-059.md): Botones, hover-fill, grow-center, pill, scale - [Barrido diagonal](https://designforai.dev/es/snippet/btn-060.md): Botones, hover-fill, diagonal, skew, rectangle - [Cortina partida](https://designforai.dev/es/snippet/btn-061.md): Botones, hover-fill, split, two-panels, outline - [Persiana descendente](https://designforai.dev/es/snippet/btn-062.md): Botones, hover-fill, slide-down, solid, dark - [Barrido desde la esquina](https://designforai.dev/es/snippet/btn-063.md): Botones, hover-fill, corner, circle-grow, rounded - [Cambio de texto deslizante](https://designforai.dev/es/snippet/btn-064.md): Botones, hover-fill, text-swap, slide-up, solid - [Subrayado creciente](https://designforai.dev/es/snippet/btn-065.md): Botones, underline, text-button, border-draw, minimal - [Subrayado desde el centro](https://designforai.dev/es/snippet/btn-066.md): Botones, underline, text-button, border-draw, center-origin - [Trazado de borde](https://designforai.dev/es/snippet/btn-067.md): Botones, border-draw, outline, corners, animated-border - [Corchetes que aparecen](https://designforai.dev/es/snippet/btn-068.md): Botones, border-draw, brackets, text-button, minimal - [Subrayado doble](https://designforai.dev/es/snippet/btn-069.md): Botones, underline, text-button, two-lines, offset - [Trazo de rotulador](https://designforai.dev/es/snippet/btn-070.md): Botones, underline, highlight, text-button, marker - [Destello oscuro](https://designforai.dev/es/snippet/btn-071.md): Botones, shine, sheen, solid, dark, sweep - [Brillo continuo](https://designforai.dev/es/snippet/btn-072.md): Botones, shine, shimmer, animated, gradient, loop - [Brillo superior glossy](https://designforai.dev/es/snippet/btn-073.md): Botones, shine, gloss, static-highlight, rounded - [Luz en contorno](https://designforai.dev/es/snippet/btn-074.md): Botones, shine, sheen, outline, border-sweep - [Destello en píldora dorada](https://designforai.dev/es/snippet/btn-075.md): Botones, shine, sheen, pill, gradient, luxury - [Flecha que avanza](https://designforai.dev/es/snippet/btn-076.md): Botones, icon, arrow, inline-svg, nudge - [Más giratorio](https://designforai.dev/es/snippet/btn-077.md): Botones, icon, plus, inline-svg, rotate, circle - [Descarga que cae](https://designforai.dev/es/snippet/btn-078.md): Botones, icon, download, inline-svg, bounce - [Icono fantasma cuadrado](https://designforai.dev/es/snippet/btn-079.md): Botones, icon, ghost, square, toolbar - [Caja de icono dividida](https://designforai.dev/es/snippet/btn-080.md): Botones, icon, arrow, boxed-icon, two-part - [Chevron que aparece](https://designforai.dev/es/snippet/btn-081.md): Botones, icon, chevron, hidden-icon, width-grow - [Carga con anillo giratorio](https://designforai.dev/es/snippet/btn-082.md): Botones, loading, spinner, css-animation, solid - [Carga de tres puntos](https://designforai.dev/es/snippet/btn-083.md): Botones, loading, dots, css-animation, pill - [Barra de progreso](https://designforai.dev/es/snippet/btn-084.md): Botones, loading, progress, animated-fill, outline - [Fantasma de carga pulsante](https://designforai.dev/es/snippet/btn-085.md): Botones, loading, pulse, skeleton, ghost - [Interruptor (checkbox)](https://designforai.dev/es/snippet/btn-086.md): Botones, toggle, switch, checkbox, pill - [Píldora conmutable (pressed)](https://designforai.dev/es/snippet/btn-087.md): Botones, toggle, pressed, aria-pressed, pill - [Pestaña deslizante](https://designforai.dev/es/snippet/btn-088.md): Botones, toggle, two-option, radio, segmented, slider - [Acción dividida](https://designforai.dev/es/snippet/btn-089.md): Botones, split, dual, dropdown, solid - [Par doble](https://designforai.dev/es/snippet/btn-090.md): Botones, split, dual, primary-secondary, pair - [Dividido con contador](https://designforai.dev/es/snippet/btn-091.md): Botones, split, dual, counter, badge - [Píxel 8 bits](https://designforai.dev/es/snippet/btn-092.md): Botones, retro, pixel, 8-bit, stepped-corners - [Prompt de terminal](https://designforai.dev/es/snippet/btn-093.md): Botones, retro, terminal, monospace, blink - [CRT ámbar](https://designforai.dev/es/snippet/btn-094.md): Botones, retro, terminal, amber, scanlines - [Gris Win95](https://designforai.dev/es/snippet/btn-095.md): Botones, retro, win95, bevel, system - [Primario medianoche](https://designforai.dev/es/snippet/btn-096.md): Botones, dark-mode, solid, rounded, glow - [Secundario medianoche](https://designforai.dev/es/snippet/btn-097.md): Botones, dark-mode, outline, subtle, rounded - [Segmentado triple](https://designforai.dev/es/snippet/btn-098.md): Botones, group, segmented, radio, three-options - [Grupo de botones unidos](https://designforai.dev/es/snippet/btn-099.md): Botones, group, joined, outline, toolbar - [Grupo de filtros píldora](https://designforai.dev/es/snippet/btn-100.md): Botones, group, pills, checkbox, multi-select - [Anillo cónico giratorio](https://designforai.dev/es/snippet/btn-101.md): Botones, gradient-border, animated, pill, conic, property - [Cuña cónica en órbita](https://designforai.dev/es/snippet/btn-102.md): Botones, gradient-border, animated, rounded, conic, property, hover-start - [Anillo con halo](https://designforai.dev/es/snippet/btn-103.md): Botones, gradient-border, animated, pill, conic, glow, property - [Guiones en marcha](https://designforai.dev/es/snippet/btn-104.md): Botones, gradient-border, animated, rectangle, conic, dashed - [Barrido de brillo](https://designforai.dev/es/snippet/btn-105.md): Botones, gradient-border, animated, rounded, conic, monochrome, property - [Pulso neón cian](https://designforai.dev/es/snippet/btn-106.md): Botones, glow, neon, pill, pulse, dark - [Latido magenta](https://designforai.dev/es/snippet/btn-107.md): Botones, glow, neon, rounded, pulse, ring - [Tubo lima parpadeante](https://designforai.dev/es/snippet/btn-108.md): Botones, glow, neon, rectangle, dark, flicker - [Brasa que respira](https://designforai.dev/es/snippet/btn-109.md): Botones, glow, warm, pill, pulse, soft-shadow - [Fantasma con borde luminoso](https://designforai.dev/es/snippet/btn-110.md): Botones, glow, outline, rounded, subtle, light-background - [Blob que muta](https://designforai.dev/es/snippet/btn-111.md): Botones, liquid, blob, morph, border-radius, organic - [Píldora líquida](https://designforai.dev/es/snippet/btn-112.md): Botones, liquid, pill, morph, animated, loop - [Interior lámpara de lava](https://designforai.dev/es/snippet/btn-113.md): Botones, liquid, pill, animated, gradient, blob-inside - [Esquina de gota](https://designforai.dev/es/snippet/btn-114.md): Botones, liquid, morph, rounded, asymmetric, spring - [Squircle aplastado](https://designforai.dev/es/snippet/btn-115.md): Botones, liquid, squircle, morph, scale, soft-body - [Cambio de texto vertical](https://designforai.dev/es/snippet/btn-116.md): Botones, text-swap, slide, rectangle, two-labels - [Cara de cubo](https://designforai.dev/es/snippet/btn-117.md): Botones, text-swap, flip, 3d, rounded, two-labels - [Tracking que se abre](https://designforai.dev/es/snippet/btn-118.md): Botones, text-swap, expand, pill, uppercase, letter-spacing - [Tachar y sustituir](https://designforai.dev/es/snippet/btn-119.md): Botones, text-swap, strikethrough, rectangle, price, reveal - [Borrado máquina de escribir](https://designforai.dev/es/snippet/btn-120.md): Botones, text-swap, typewriter, mono, steps, terminal - [Elevación con inclinación](https://designforai.dev/es/snippet/btn-121.md): Botones, tilt, 3d, rounded, perspective, lift - [Atracción magnética](https://designforai.dev/es/snippet/btn-122.md): Botones, tilt, magnetic, pill, translate, overshoot - [Capas con parallax](https://designforai.dev/es/snippet/btn-123.md): Botones, tilt, 3d, layered, rectangle, depth - [Balanceo de péndulo](https://designforai.dev/es/snippet/btn-124.md): Botones, tilt, rotate, rounded, hinge, animated - [Inclinación sesgada](https://designforai.dev/es/snippet/btn-125.md): Botones, tilt, skew, rectangle, italic, shadow-offset - [Metal cepillado](https://designforai.dev/es/snippet/btn-126.md): Botones, skeuomorphic, embossed, rectangle, metallic, gradient - [Cuero cosido](https://designforai.dev/es/snippet/btn-127.md): Botones, skeuomorphic, embossed, rounded, stitched, warm - [Papel en relieve](https://designforai.dev/es/snippet/btn-128.md): Botones, skeuomorphic, embossed, rectangle, letterpress, light - [Cúpula de cristal](https://designforai.dev/es/snippet/btn-129.md): Botones, skeuomorphic, embossed, pill, glossy, jelly - [Dial pulsado](https://designforai.dev/es/snippet/btn-130.md): Botones, skeuomorphic, embossed, circle, icon, ring - [Burbuja de arcilla](https://designforai.dev/es/snippet/btn-131.md): Botones, claymorphism, pill, soft, inset-shadow, pastel - [Arcilla melocotón](https://designforai.dev/es/snippet/btn-132.md): Botones, claymorphism, rounded, soft, pastel, warm - [Icono de arcilla menta](https://designforai.dev/es/snippet/btn-133.md): Botones, claymorphism, circle, icon, soft, pastel - [Arcilla lavanda ancha](https://designforai.dev/es/snippet/btn-134.md): Botones, claymorphism, full-width, soft, pastel, subtitle - [Arcilla modo oscuro](https://designforai.dev/es/snippet/btn-135.md): Botones, claymorphism, rounded, dark, soft, inset-shadow - [Deriva aurora](https://designforai.dev/es/snippet/btn-136.md): Botones, aurora, mesh, pill, animated, gradient - [Malla amanecer](https://designforai.dev/es/snippet/btn-137.md): Botones, aurora, mesh, rounded, warm, static-with-hover - [Barra aurora boreal](https://designforai.dev/es/snippet/btn-138.md): Botones, aurora, full-width, animated, dark, gradient-sweep - [Lámina holográfica](https://designforai.dev/es/snippet/btn-139.md): Botones, aurora, holographic, pill, animated, iridescent - [Texto aurora en contorno](https://designforai.dev/es/snippet/btn-140.md): Botones, aurora, outline, gradient-text, rounded, animated - [Corte glitch](https://designforai.dev/es/snippet/btn-141.md): Botones, cyberpunk, glitch, rectangle, clip-path, animated - [Esquinas achaflanadas](https://designforai.dev/es/snippet/btn-142.md): Botones, cyberpunk, clip-path, rectangle, angular, hud - [Barrido de líneas CRT](https://designforai.dev/es/snippet/btn-143.md): Botones, cyberpunk, scanline, rectangle, dark, animated - [Etiqueta con muesca](https://designforai.dev/es/snippet/btn-144.md): Botones, cyberpunk, clip-path, rectangle, notch, label - [Separación RGB en hover](https://designforai.dev/es/snippet/btn-145.md): Botones, cyberpunk, glitch, pill, chromatic, text-shadow - [Relleno inset lateral](https://designforai.dev/es/snippet/btn-146.md): Botones, inset-fill, outline, rectangle, box-shadow, left-to-right - [Relleno inset vertical](https://designforai.dev/es/snippet/btn-147.md): Botones, inset-fill, outline, pill, box-shadow, bottom-up - [Relleno inset central](https://designforai.dev/es/snippet/btn-148.md): Botones, inset-fill, outline, rounded, box-shadow, spread-from-centre - [Relleno inset diagonal doble](https://designforai.dev/es/snippet/btn-149.md): Botones, inset-fill, outline, rectangle, box-shadow, two-shadows - [Relleno inset con salto](https://designforai.dev/es/snippet/btn-150.md): Botones, inset-fill, outline, circle, icon, box-shadow - [Corchetes en esquinas](https://designforai.dev/es/snippet/btn-151.md): Botones, bracket, corner-mark, rectangle, outline, hover-expand - [Marcas en cuatro esquinas](https://designforai.dev/es/snippet/btn-152.md): Botones, bracket, corner-mark, rectangle, outline, viewfinder - [Corchetes alrededor del texto](https://designforai.dev/es/snippet/btn-153.md): Botones, bracket, corner-mark, text, minimal, slide-in - [Puntos en las esquinas](https://designforai.dev/es/snippet/btn-154.md): Botones, bracket, corner-mark, rounded, dots, outline - [Flechas de etiqueta](https://designforai.dev/es/snippet/btn-155.md): Botones, bracket, corner-mark, text, code, chevron - [Pegatina inclinada](https://designforai.dev/es/snippet/btn-156.md): Botones, sticker, badge, rotation, rounded, white-edge - [Etiqueta de precio](https://designforai.dev/es/snippet/btn-157.md): Botones, sticker, badge, tag, rotation, clip-path - [Sello de goma](https://designforai.dev/es/snippet/btn-158.md): Botones, sticker, badge, circle, rotation, double-ring - [Cinta en la esquina](https://designforai.dev/es/snippet/btn-159.md): Botones, sticker, badge, ribbon, rotation, rectangle - [Pegatina con contorno](https://designforai.dev/es/snippet/btn-160.md): Botones, sticker, badge, pill, rotation, outline-stroke - [Chip con cierre suave](https://designforai.dev/es/snippet/btn-161.md): Botones, chip, pill, close-x, small, tinted - [Chip con cierre outline](https://designforai.dev/es/snippet/btn-162.md): Botones, chip, pill, close-x, outline, small - [Chip seleccionable](https://designforai.dev/es/snippet/btn-163.md): Botones, chip, pill, toggle, small, checkbox-driven - [Chip con contador](https://designforai.dev/es/snippet/btn-164.md): Botones, chip, rounded, close-x, count, small - [Chip con avatar](https://designforai.dev/es/snippet/btn-165.md): Botones, chip, pill, close-x, avatar, small - [FAB clásico](https://designforai.dev/es/snippet/btn-166.md): Botones, fab, circle, icon, elevated, floating - [FAB extendido](https://designforai.dev/es/snippet/btn-167.md): Botones, fab, pill, icon, label, floating - [FAB con giro](https://designforai.dev/es/snippet/btn-168.md): Botones, fab, circle, icon, rotate, floating - [FAB squircle degradado](https://designforai.dev/es/snippet/btn-169.md): Botones, fab, squircle, icon, gradient, floating - [Pila de mini FAB](https://designforai.dev/es/snippet/btn-170.md): Botones, fab, circle, icon, small, group - [Enlace con flecha](https://designforai.dev/es/snippet/btn-171.md): Botones, link-style, arrow, text, minimal, slide - [Flecha que entra](https://designforai.dev/es/snippet/btn-172.md): Botones, link-style, arrow, text, reveal, underline - [Flecha en círculo](https://designforai.dev/es/snippet/btn-173.md): Botones, link-style, arrow, icon-circle, text, expand - [Flecha de línea larga](https://designforai.dev/es/snippet/btn-174.md): Botones, link-style, arrow, line, editorial, expand - [Flecha con rebote](https://designforai.dev/es/snippet/btn-175.md): Botones, link-style, arrow, text, animated, bounce - [Destello IA degradado](https://designforai.dev/es/snippet/btn-176.md): Botones, sparkle, ai, pill, gradient, icon, animated - [Destello IA outline](https://designforai.dev/es/snippet/btn-177.md): Botones, sparkle, ai, rounded, outline, gradient-border, icon - [Destello en órbita](https://designforai.dev/es/snippet/btn-178.md): Botones, sparkle, ai, pill, dark, animated, orbit - [Destello con brillo](https://designforai.dev/es/snippet/btn-179.md): Botones, sparkle, ai, rounded, shimmer, light - [Varita mágica](https://designforai.dev/es/snippet/btn-180.md): Botones, sparkle, ai, pill, icon, rotate, gradient - [Mantener para confirmar](https://designforai.dev/es/snippet/btn-181.md): Botones, progress, hold, rectangle, fill, active-driven - [Progreso estático](https://designforai.dev/es/snippet/btn-182.md): Botones, progress, rectangle, fill, custom-property, percentage - [Anillo de progreso](https://designforai.dev/es/snippet/btn-183.md): Botones, progress, circle, ring, conic, custom-property - [Rayas indeterminadas](https://designforai.dev/es/snippet/btn-184.md): Botones, progress, rectangle, striped, animated, busy - [Cuenta atrás](https://designforai.dev/es/snippet/btn-185.md): Botones, progress, pill, drain, animated, timed - [Píldora compartir](https://designforai.dev/es/snippet/btn-186.md): Botones, share, pill, icon, outline, generic - [Copiar enlace](https://designforai.dev/es/snippet/btn-187.md): Botones, share, copy-link, rounded, icon, text-swap - [Fila compartir dividida](https://designforai.dev/es/snippet/btn-188.md): Botones, share, group, rounded, icon-buttons, generic - [Compartir en abanico](https://designforai.dev/es/snippet/btn-189.md): Botones, share, group, reveal, icon-buttons, hover-expand - [Compartir con contador](https://designforai.dev/es/snippet/btn-190.md): Botones, share, pill, count, icon, split - [Banner CTA con subtítulo](https://designforai.dev/es/snippet/btn-191.md): Botones, cta, banner, wide, subtitle, dark - [Banner CTA con flecha](https://designforai.dev/es/snippet/btn-192.md): Botones, cta, banner, wide, subtitle, arrow, light - [Banner CTA degradado](https://designforai.dev/es/snippet/btn-193.md): Botones, cta, banner, wide, subtitle, gradient, centered - [Banner CTA con icono](https://designforai.dev/es/snippet/btn-194.md): Botones, cta, banner, wide, subtitle, icon, soft - [Micro píldora](https://designforai.dev/es/snippet/btn-195.md): Botones, xs, micro, pill, tiny, neutral - [Micro tecla](https://designforai.dev/es/snippet/btn-196.md): Botones, xs, micro, keyboard, mono, rectangle - [Micro icono cuadrado](https://designforai.dev/es/snippet/btn-197.md): Botones, xs, micro, icon, square, ghost - [Escala con color-mix](https://designforai.dev/es/snippet/btn-198.md): Botones, modern-css, color-mix, rounded, single-hue, fallback - [Tema automático light-dark](https://designforai.dev/es/snippet/btn-199.md): Botones, modern-css, light-dark, rounded, theme-aware, fallback - [Squircle con corner-shape](https://designforai.dev/es/snippet/btn-200.md): Botones, modern-css, corner-shape, oklch, squircle, fallback - [Contenido discreto](https://designforai.dev/es/snippet/card-001.md): Tarjetas, content, basic, image-top, light, hover-lift - [Foto con etiqueta](https://designforai.dev/es/snippet/card-002.md): Tarjetas, content, basic, image-top, tag, light - [Fundido inferior](https://designforai.dev/es/snippet/card-003.md): Tarjetas, content, image-top, overlay, dark, gradient - [Pie con sombra suave](https://designforai.dev/es/snippet/card-004.md): Tarjetas, content, basic, footer, light, soft-shadow - [Zoom de imagen](https://designforai.dev/es/snippet/card-005.md): Tarjetas, content, basic, image-top, hover-zoom, light - [Fila con media izquierda](https://designforai.dev/es/snippet/card-006.md): Tarjetas, horizontal, media-left, light, hover-lift - [Fila con miniatura](https://designforai.dev/es/snippet/card-007.md): Tarjetas, horizontal, media-left, compact, list-item, light - [Barra de acento oscura](https://designforai.dev/es/snippet/card-008.md): Tarjetas, horizontal, media-left, dark, accent - [Media a la derecha](https://designforai.dev/es/snippet/card-009.md): Tarjetas, horizontal, media-right, light, split - [Avatar centrado](https://designforai.dev/es/snippet/card-010.md): Tarjetas, profile, avatar, centered, light, cta - [Perfil con banner](https://designforai.dev/es/snippet/card-011.md): Tarjetas, profile, avatar, banner, stats, light - [Fila de equipo](https://designforai.dev/es/snippet/card-012.md): Tarjetas, profile, avatar, horizontal, socials, light - [Perfil con estado](https://designforai.dev/es/snippet/card-013.md): Tarjetas, profile, avatar, dark, status, glow - [Carné con avatar cuadrado](https://designforai.dev/es/snippet/card-014.md): Tarjetas, profile, id-card, mono, minimal, light - [Precios clásico](https://designforai.dev/es/snippet/card-015.md): Tarjetas, pricing, feature-list, cta, light - [Plan pro destacado](https://designforai.dev/es/snippet/card-016.md): Tarjetas, pricing, featured, badge, dark, gradient - [Precios en línea](https://designforai.dev/es/snippet/card-017.md): Tarjetas, pricing, minimal, mono, light, hover-border - [Divisor por niveles](https://designforai.dev/es/snippet/card-018.md): Tarjetas, pricing, tiered, accent, light, shadow - [Precio por asiento](https://designforai.dev/es/snippet/card-019.md): Tarjetas, pricing, compact, per-seat, light, badge - [Insignia y añadir al carrito](https://designforai.dev/es/snippet/card-020.md): Tarjetas, product, ecommerce, badge, price, light, hover-lift - [Añadir deslizante](https://designforai.dev/es/snippet/card-021.md): Tarjetas, product, ecommerce, hover-reveal, minimal, light - [Valoración y muestras](https://designforai.dev/es/snippet/card-022.md): Tarjetas, product, ecommerce, rating, swatches, light - [Cinta de descuento](https://designforai.dev/es/snippet/card-023.md): Tarjetas, product, ecommerce, dark, ribbon, discount - [Línea de carrito](https://designforai.dev/es/snippet/card-024.md): Tarjetas, product, cart-item, horizontal, quantity, light - [Comillas grandes](https://designforai.dev/es/snippet/card-025.md): Tarjetas, testimonial, quote, light, serif - [Cita oscura con estrellas](https://designforai.dev/es/snippet/card-026.md): Tarjetas, testimonial, quote, dark, stars, avatar - [Cita con barra de acento](https://designforai.dev/es/snippet/card-027.md): Tarjetas, testimonial, quote, accent, light, logo - [Cristal esmerilado](https://designforai.dev/es/snippet/card-028.md): Tarjetas, glass, glassmorphism, blur, gradient, light - [Cristal nocturno](https://designforai.dev/es/snippet/card-029.md): Tarjetas, glass, glassmorphism, dark, blur, highlight - [Relieve suave](https://designforai.dev/es/snippet/card-030.md): Tarjetas, neumorphic, soft-ui, light, embossed, button - [Estadística en relieve oscuro](https://designforai.dev/es/snippet/card-031.md): Tarjetas, neumorphic, soft-ui, dark, stat, embossed - [Brutalista con sombra dura](https://designforai.dev/es/snippet/card-032.md): Tarjetas, brutalist, neo-brutalist, hard-shadow, thick-border, light - [Póster con pegatina](https://designforai.dev/es/snippet/card-033.md): Tarjetas, brutalist, neo-brutalist, image-top, sticker, hard-shadow - [Borde cónico giratorio](https://designforai.dev/es/snippet/card-034.md): Tarjetas, gradient-border, conic, animated, dark, property - [Borde degradado recortado](https://designforai.dev/es/snippet/card-035.md): Tarjetas, gradient-border, background-clip, light, hover-shift - [Elevación con brillo](https://designforai.dev/es/snippet/card-036.md): Tarjetas, hover-lift, glow, image-top, light, shadow - [Inclinación en perspectiva](https://designforai.dev/es/snippet/card-037.md): Tarjetas, 3d, tilt, perspective, hover, dark, shine - [Volteo en hover](https://designforai.dev/es/snippet/card-038.md): Tarjetas, flip, 3d, hover, two-sided, light - [Tocar para voltear](https://designforai.dev/es/snippet/card-039.md): Tarjetas, flip, 3d, toggle, checkbox, no-js, dark - [Pie deslizante](https://designforai.dev/es/snippet/card-040.md): Tarjetas, image, overlay, hover-reveal, caption, slide-up - [Superposición oscura](https://designforai.dev/es/snippet/card-041.md): Tarjetas, image, overlay, hover-reveal, icon, dark, zoom - [Baldosas bento de estadísticas](https://designforai.dev/es/snippet/card-042.md): Tarjetas, bento, grid, tiles, layout, light - [Baldosa bento punteada](https://designforai.dev/es/snippet/card-043.md): Tarjetas, bento, feature, pattern, dots, light - [Toast de éxito](https://designforai.dev/es/snippet/card-044.md): Tarjetas, toast, notification, success, light, icon - [Toast de error con cuenta atrás](https://designforai.dev/es/snippet/card-045.md): Tarjetas, toast, notification, error, dark, progress, animated - [Línea de tiempo de versiones](https://designforai.dev/es/snippet/card-046.md): Tarjetas, timeline, steps, list, light, dots - [Asistente por pasos](https://designforai.dev/es/snippet/card-047.md): Tarjetas, steps, progress, wizard, light, numbered - [Tema del sistema](https://designforai.dev/es/snippet/card-048.md): Tarjetas, dark-mode, theme, tokens, media-query, adaptive - [Colores light-dark](https://designforai.dev/es/snippet/card-049.md): Tarjetas, dark-mode, theme, light-dark, color-scheme, modern-css - [Esqueleto con brillo](https://designforai.dev/es/snippet/card-050.md): Tarjetas, skeleton, loading, shimmer, placeholder, animated - [Fila esqueleto pulsante](https://designforai.dev/es/snippet/card-051.md): Tarjetas, skeleton, loading, pulse, list-item, placeholder - [Descarga de archivo](https://designforai.dev/es/snippet/card-052.md): Tarjetas, file, download, document, light, icon - [Zona de subida](https://designforai.dev/es/snippet/card-053.md): Tarjetas, file, upload, dropzone, dashed, light, hover - [Vista previa de enlace](https://designforai.dev/es/snippet/card-054.md): Tarjetas, link-preview, og, bookmark, image-top, light - [Chip de enlace con favicon](https://designforai.dev/es/snippet/card-055.md): Tarjetas, link-preview, compact, inline, favicon, light - [Fecha grande](https://designforai.dev/es/snippet/card-056.md): Tarjetas, event, date, calendar, big-number, light - [Franja horaria](https://designforai.dev/es/snippet/card-057.md): Tarjetas, event, date, dark, time-strip, cta - [Reproductor de música](https://designforai.dev/es/snippet/card-058.md): Tarjetas, music, player, media, dark, progress, controls - [Ecualizador en reproducción](https://designforai.dev/es/snippet/card-059.md): Tarjetas, music, now-playing, mini, equalizer, animated, light - [Píldora de variación](https://designforai.dev/es/snippet/card-060.md): Tarjetas, stat, kpi, metric, delta, light, dashboard - [Estadística con sparkline](https://designforai.dev/es/snippet/card-061.md): Tarjetas, stat, kpi, sparkline, chart, light, svg - [Estadística con anillo](https://designforai.dev/es/snippet/card-062.md): Tarjetas, stat, kpi, progress, ring, conic, light - [Característica con baldosa](https://designforai.dev/es/snippet/card-063.md): Tarjetas, feature, icon, light, marketing, hover-lift - [Icono degradado](https://designforai.dev/es/snippet/card-064.md): Tarjetas, feature, icon, dark, gradient, arrow, hover - [Blog con autor](https://designforai.dev/es/snippet/card-065.md): Tarjetas, blog, article, meta, avatar, image-top, light - [Fila de ensayo editorial](https://designforai.dev/es/snippet/card-066.md): Tarjetas, blog, article, editorial, serif, horizontal, meta - [Enterprise a dos columnas](https://designforai.dev/es/snippet/card-067.md): Tarjetas, pricing, enterprise, feature-list, cta, light, gradient-top - [Anillo degradado y habilidades](https://designforai.dev/es/snippet/card-068.md): Tarjetas, profile, avatar, gradient-ring, tags, light, hover - [Pila con container query](https://designforai.dev/es/snippet/card-069.md): Tarjetas, container-query, responsive, modern-css, adaptive, light - [Marcar para seleccionar](https://designforai.dev/es/snippet/card-070.md): Tarjetas, has, selectable, checkbox, state, modern-css, light - [Selector de plan con radio](https://designforai.dev/es/snippet/card-071.md): Tarjetas, has, radio, pricing, selectable, state, light - [Fila alineada con subgrid](https://designforai.dev/es/snippet/card-072.md): Tarjetas, subgrid, grid, aligned, layout, modern-css, light - [Esquinas squircle](https://designforai.dev/es/snippet/card-073.md): Tarjetas, corner-shape, squircle, modern-css, fallback, light - [Ticket biselado](https://designforai.dev/es/snippet/card-074.md): Tarjetas, corner-shape, bevel, ticket, modern-css, fallback, dark - [Tarjeta de embarque](https://designforai.dev/es/snippet/card-075.md): Tarjetas, ticket, notches, mask, dashed, light - [Cupón con código](https://designforai.dev/es/snippet/card-076.md): Tarjetas, coupon, discount, dashed, promo, light - [Publicación social](https://designforai.dev/es/snippet/card-077.md): Tarjetas, social, post, feed, avatar, actions, light - [Hilo de comentarios anidado](https://designforai.dev/es/snippet/card-078.md): Tarjetas, comment, thread, nested, avatar, light - [Burbujas de chat](https://designforai.dev/es/snippet/card-079.md): Tarjetas, chat, messages, bubbles, dark, conversation - [Widget del tiempo](https://designforai.dev/es/snippet/card-080.md): Tarjetas, weather, widget, gradient, big-number, svg, light - [Receta con chips](https://designforai.dev/es/snippet/card-081.md): Tarjetas, recipe, food, chips, image-top, light - [Oferta de empleo](https://designforai.dev/es/snippet/card-082.md): Tarjetas, job, listing, tags, logo, light, hover - [Progreso de curso](https://designforai.dev/es/snippet/card-083.md): Tarjetas, course, learning, progress, image-top, light - [Tarea marcada](https://designforai.dev/es/snippet/card-084.md): Tarjetas, task, todo, checkbox, has, state, light - [Nota adhesiva](https://designforai.dev/es/snippet/card-085.md): Tarjetas, sticky-note, paper, rotated, handwritten, yellow - [Marco polaroid](https://designforai.dev/es/snippet/card-086.md): Tarjetas, photo, polaroid, frame, rotated, light, caption - [Tarjeta de pago brillante](https://designforai.dev/es/snippet/card-087.md): Tarjetas, payment, credit-card, dark, gradient, chip, glossy - [Baraja en abanico](https://designforai.dev/es/snippet/card-088.md): Tarjetas, stack, deck, layered, hover, light, playful - [Foco en la esquina](https://designforai.dev/es/snippet/card-089.md): Tarjetas, spotlight, glow, radial, hover, dark, subtle - [Degradado a la deriva](https://designforai.dev/es/snippet/card-090.md): Tarjetas, gradient, animated, keyframes, colorful, cta - [Grano de papel](https://designforai.dev/es/snippet/card-091.md): Tarjetas, texture, grain, noise, svg, warm, editorial - [Borde de tubo de neón](https://designforai.dev/es/snippet/card-092.md): Tarjetas, neon, glow, dark, cyberpunk, border-glow, hover - [Marcador de añadir nuevo](https://designforai.dev/es/snippet/card-093.md): Tarjetas, placeholder, add-new, dashed, empty-state, light - [Mini cita con logo](https://designforai.dev/es/snippet/card-094.md): Tarjetas, testimonial, logo, mini, quote, light, row - [Registro de cambios](https://designforai.dev/es/snippet/card-095.md): Tarjetas, changelog, release, version, badge, list, light - [Métricas antes y después](https://designforai.dev/es/snippet/card-096.md): Tarjetas, comparison, two-column, metrics, light, versus - [Fila de tienda de apps](https://designforai.dev/es/snippet/card-097.md): Tarjetas, app, install, icon, rating, light, row - [Miniatura con play](https://designforai.dev/es/snippet/card-098.md): Tarjetas, video, thumbnail, play, duration, dark, hover - [Dirección con pin](https://designforai.dev/es/snippet/card-099.md): Tarjetas, location, map, pin, svg, address, light - [Alta en newsletter](https://designforai.dev/es/snippet/card-100.md): Tarjetas, newsletter, form, input, cta, dark, gradient ## Estanterías - [Botones pill](https://designforai.dev/es/buttons/pill): Botones totalmente redondeados para chips, filtros, toggles y algún contador de compartidos: outline, sólidos, bicolor y glass. Copia el CSS, o el prompt que reconstruye uno en tu herramienta de IA. - [Botones outline](https://designforai.dev/es/buttons/outline): Botones outline y ghost: bordes finos, discontinuos, dobles y con relleno al hover, para la acción secundaria que no debe gritar. - [Botones con degradado](https://designforai.dev/es/buttons/gradient): Rellenos y bordes con degradado, incluidos bordes cónicos que rotan con @property y lavados mesh que siguen siendo legibles. - [Botones con icono](https://designforai.dev/es/buttons/icon): Botones que llevan un SVG inline: flechas que se desplazan, signos más que rotan, descargas que se rellenan, todos con una etiqueta accesible. - [Botones animados](https://designforai.dev/es/buttons/animated): Shimmers, spinners, rellenos de progreso y pulsos, cada uno con su guarda de prefers-reduced-motion ya incluida en el CSS copiado. - [Botones sólidos](https://designforai.dev/es/buttons/solid): Botones planos y rellenos en un solo color, con estados hover, focus y active bien resueltos. La estantería de batalla. - [Botones 3D](https://designforai.dev/es/buttons/3d): Botones con canto físico: estados pulsados, biseles, caras que caen e inclinación, hechos con box-shadow y translate, sin imágenes. - [Botones glass](https://designforai.dev/es/buttons/glass): Rellenos translúcidos, backdrop blur y bordes de luz. Solo funcionan sobre color, así que cada demo trae su propio fondo y un fallback sólido. - [Botones neumórficos](https://designforai.dev/es/buttons/neumorphic): Botones de soft UI que se levantan de la página con una sombra clara y otra oscura, y se hunden al pulsar. - [Botones brutalistas](https://designforai.dev/es/buttons/brutalist): Bordes gruesos, sombras duras desplazadas, radio cero y rellenos llamativos. El botón se mete en su sombra al pulsarlo. - [Botones oscuros](https://designforai.dev/es/buttons/dark): Botones pensados para interfaces oscuras: rellenos tinta, bordes finos y brillos que se leen sobre casi negro. - [Botones neón](https://designforai.dev/es/buttons/neon): Contornos de tubo, halos de brillo y parpadeo, legibles gracias a un color de texto sólido bajo el resplandor. - [Tarjetas de precios](https://designforai.dev/es/cards/pricing): Niveles, un plan destacado, listas de funcionalidades y un CTA, cada pieza copiable por separado. - [Tarjetas de perfil](https://designforai.dev/es/cards/profile): Avatar, nombre, rol y un estado o una acción de seguir, desde el mono tipo carnet hasta lo suave y redondeado. - [Tarjetas con imagen](https://designforai.dev/es/cards/image): Tarjetas guiadas por una foto: imagen arriba, portadas a sangre y texto sobre un degradado o una capa oscurecida. - [Tarjetas horizontales](https://designforai.dev/es/cards/horizontal): Medio a un lado, texto al otro, para listas, feeds y resultados de búsqueda. - [Tarjetas con hover](https://designforai.dev/es/cards/hover): Tarjetas que reaccionan al hover: elevaciones, giros, revelados y cambios de borde, cada una con su guarda de reduced-motion. - [Tarjetas oscuras](https://designforai.dev/es/cards/dark): Tarjetas para interfaces oscuras: superficies elevadas, bordes finos y brillos sobre casi negro. ## Estilos - [Glassmorphism](https://designforai.dev/es/style/glassmorphism.md): interfaz de cristal esmerilado, tarjetas de cristal, UI con backdrop blur, UI translúcida - [Liquid glass](https://designforai.dev/es/style/liquid-glass.md): Apple liquid glass, cristal de iOS 26, UI refractiva, cristal con efecto lente - [Neumorphism](https://designforai.dev/es/style/neumorphism.md): soft UI, neomorfismo, UI extruida, UI de sombras suaves - [Claymorphism](https://designforai.dev/es/style/claymorphism.md): UI de arcilla, clay 3D, UI inflada, UI esponjosa - [Neo-brutalismo](https://designforai.dev/es/style/neo-brutalism.md): neubrutalismo, web neo-brutalista, estilo Gumroad, UI de bordes gruesos - [Brutalismo clásico](https://designforai.dev/es/style/classic-brutalism.md): web cruda, sitios brutalistas, anti-diseño, estética de HTML por defecto, brutalismo web 1.0 - [Estilo suizo / tipográfico internacional](https://designforai.dev/es/style/swiss-international-typographic-style.md): estilo suizo, estilo internacional, diseño de retícula, diseño Helvetica, estilo Müller-Brockmann - [Editorial / revista](https://designforai.dev/es/style/editorial-magazine.md): diseño editorial, maquetación de revista, periódico web, editorial de formato largo - [Minimalismo](https://designforai.dev/es/style/minimalism.md): diseño web minimalista, menos es más, UI limpia, diseño de espacio en blanco - [Maximalismo](https://designforai.dev/es/style/maximalism.md): web maximalista, más es más, anti-minimalismo, diseño de sobrecarga visual - [Retícula bento](https://designforai.dev/es/style/bento-grid.md): layout de caja bento, UI bento, retícula de keynote de Apple, mosaico de funciones - [SaaS de medianoche](https://designforai.dev/es/style/midnight-saas.md): estilo Linear, SaaS oscuro, landing de desarrollador en modo oscuro, UI de producto oscura, look Raycast - [Terminal / hacker](https://designforai.dev/es/style/terminal-hacker.md): estética hacker, UI de CLI, web de línea de comandos, pantalla verde, estilo TUI - [Retro pixel / 8 bits](https://designforai.dev/es/style/retro-pixel-8-bit.md): UI de pixel art, diseño de 8 bits, estilo NES, 16 bits, UI de juego retro - [Y2K / Frutiger Aero](https://designforai.dev/es/style/y2k-frutiger-aero.md): web Y2K, Frutiger Aero, cristal aero, estilo Windows Vista, futurismo de los 2000, UI de burbujas - [Vaporwave](https://designforai.dev/es/style/vaporwave.md): estética vaporwave, web a e s t h e t i c, cercano al synthwave, retro Windows 95 - [Cyberpunk / neón](https://designforai.dev/es/style/cyberpunk-neon.md): UI cyberpunk, UI neón, synthwave, diseño glitch, ciudad nocturna - [Memphis](https://designforai.dev/es/style/memphis.md): diseño Memphis, estilo del Grupo Memphis, posmoderno de los 80, diseño de garabatos - [Bauhaus](https://designforai.dev/es/style/bauhaus.md): diseño Bauhaus, web Bauhaus, modernismo geométrico, diseño de colores primarios - [Art Deco](https://designforai.dev/es/style/art-deco.md): web Art Deco, estilo Gatsby, lujo de los años 20, lujo geométrico, dorado deco - [Flat 2.0](https://designforai.dev/es/style/flat-2-0.md): flat design 2.0, semi-flat, casi flat, flat con sombras, Material ligero - [Material 3 Expressive](https://designforai.dev/es/style/material-3-expressive.md): Material You, Material Design 3, M3 Expressive, estilo Android 16, color dinámico - [Skeuomorfismo](https://designforai.dev/es/style/skeuomorphism.md): diseño skeuomórfico, UI realista, estilo iOS 6, UI de cuero y lino, revival skeuomorfo - [Papel / cuaderno](https://designforai.dev/es/style/paper-notebook.md): UI de cuaderno, diseño de papel pautado, web de cuaderno de bocetos, UI de notas adhesivas, estilo papelería - [Minimal cálido en papel crema](https://designforai.dev/es/style/cream-paper-warm-minimal.md): minimalismo cálido, minimal crema, UI beige, minimal acogedor, diseño blanco papel, web de lujo silencioso - [Corporate Memphis (estilo de ilustración)](https://designforai.dev/es/style/corporate-memphis.md): estilo Alegria, ilustración de las big tech, ilustración de personas planas, estilo de ilustración de Facebook, globohomo (peyorativo) - [Monocromo blanco y negro](https://designforai.dev/es/style/monochrome-black-and-white.md): diseño web en blanco y negro, UI monocroma, diseño acromático, diseño sin color, sitio en escala de grises - [Accesibilidad de alto contraste](https://designforai.dev/es/style/high-contrast-accessibility.md): diseño accesible, diseño WCAG AAA, modo de alto contraste, UI inclusiva, a11y primero - [Soft UI pastel](https://designforai.dev/es/style/pastel-soft-ui.md): diseño pastel, UI pastel suave, UI caramelo, UI de ensueño, estética soft, kawaii ligero - [Gradiente mesh / aurora](https://designforai.dev/es/style/gradient-mesh-aurora.md): gradiente mesh, fondo aurora, manchas de gradiente, UI de aurora boreal, gradiente de Stripe - [Cristal + grano de ruido](https://designforai.dev/es/style/glass-noise-grain.md): cristal granulado, UI esmerilada con grano, UI de gradiente con ruido, web con grano de película, cristal texturizado - [Dibujado a mano / boceto](https://designforai.dev/es/style/hand-drawn-sketch.md): UI de boceto, diseño doodle, web dibujada a mano, UI temblorosa, estilo Excalidraw - [Fanzine / collage](https://designforai.dev/es/style/zine-collage.md): diseño de fanzine, collage punk, web de cortar y pegar, estética DIY, estilo fotocopia, estilo riso - [Minimal japonés (ma)](https://designforai.dev/es/style/japanese-minimal.md): minimalismo japonés, diseño ma, web wabi-sabi, UI zen, estilo Muji, kanso - [Escandinavo](https://designforai.dev/es/style/scandinavian.md): diseño escandinavo, minimalismo nórdico, web hygge, limpio nórdico, moderno danés - [Industrial / blueprint / ingeniería](https://designforai.dev/es/style/industrial-blueprint-engineering.md): diseño blueprint, UI de ingeniería, estilo de dibujo técnico, estética CAD, web esquemática - [Serif de lujo / moda](https://designforai.dev/es/style/luxury-fashion-serif.md): diseño web de lujo, editorial de moda, sitio de marca de alta gama, web de alta costura, lujo silencioso - [Redondeado juguetón (tipo Duolingo)](https://designforai.dev/es/style/playful-rounded.md): estilo Duolingo, UI juguetona y robusta, UI de botones 3D, UI gamificada, diseño redondeado amigable - [Infantil / libro de cuentos](https://designforai.dev/es/style/kids-storybook.md): diseño web para niños, UI de libro de cuentos, estilo de álbum ilustrado, diseño de apps infantiles, sitio de ilustración caprichosa - [Retrofuturismo](https://designforai.dev/es/style/retro-futurism.md): retrofuturismo, diseño de la era atómica, UI de la era espacial, futuro de los años 50, estilo Jetsons, futurismo de mediados de siglo - [HUD de ciencia ficción](https://designforai.dev/es/style/sci-fi-hud.md): UI HUD, FUI (UI ficticia), heads-up display, interfaz de nave espacial, UI de Iron Man, UI holográfica - [Formas orgánicas / blobs](https://designforai.dev/es/style/organic-blob-shapes.md): diseño de blobs, UI de formas orgánicas, formas fluidas, formas de ameba, blobs que se transforman, web biomórfica - [Solo tipografía](https://designforai.dev/es/style/typographic-only.md): diseño guiado por la tipografía, tipografía primero, web solo de texto, diseño sin imágenes, tipografía como imagen - [Guiado por la fotografía](https://designforai.dev/es/style/photography-led.md): diseño foto primero, web guiada por imágenes, fotografía a sangre, sitio de narrativa visual, lookbook - [Cinético / movimiento primero](https://designforai.dev/es/style/kinetic-motion-first.md): web de motion design, sitio de tipografía cinética, web animada, diseño guiado por scroll, estilo awwwards - [Tinta electrónica / calma de bajo contraste](https://designforai.dev/es/style/e-ink-low-contrast-calm.md): UI e-ink, diseño de tecnología calmada, UI de bajo contraste, estilo de pantalla de papel, modo lectura, estilo Kindle - [Dashboard / denso en datos](https://designforai.dev/es/style/dashboard-data-dense.md): UI densa en datos, diseño de panel de administración, UI de analítica, estilo terminal Bloomberg, UI empresarial densa, estilo Tufte - [Gubernamental / institucional limpio](https://designforai.dev/es/style/government-institutional-clean.md): sistema de diseño gubernamental, estilo GOV.UK, USWDS, diseño cívico, UI del sector público, web institucional - [Tech neogrotesca](https://designforai.dev/es/style/neo-grotesque-tech.md): estilo grotesk tech, Helvetica tech, estilo tipográfico Stripe-Vercel, grotesk de marca de desarrollador, SaaS modernista - [Resplandor en gradiente de startup de IA (el look slop por defecto)](https://designforai.dev/es/style/ai-startup-gradient-glow.md): estilo de landing de IA, SaaS de gradiente púrpura, estética de IA genérica, resplandor en gradiente en modo oscuro, look por defecto de v0, diseño AI slop ## Nuevo en CSS - [Container queries (size) + cqi/cqw units](https://designforai.dev/es/css/container-queries.md): Baseline 2023 (Chrome 105, Safari 16, Firefox 110); disponible de forma generalizada desde 2025. Las consultas solo por nombre (sin condición de tamaño) son Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). - [:has() relational selector](https://designforai.dev/es/css/has-relational-selector.md): Baseline 2023 (Chrome 105, Safari 15.4, Firefox 121); disponible de forma generalizada. - [CSS nesting](https://designforai.dev/es/css/nesting.md): Baseline 2023 (Chrome 120 sintaxis relajada, Safari 17.2, Firefox 117); disponible de forma generalizada. - [Cascade layers (@layer)](https://designforai.dev/es/css/cascade-layers.md): Baseline 2022 (Chrome 99, Safari 15.4, Firefox 97); disponible de forma generalizada. - [Subgrid](https://designforai.dev/es/css/subgrid.md): Baseline 2023 (Chrome 117, Safari 16, Firefox 71); disponible de forma generalizada. - [color-mix()](https://designforai.dev/es/css/color-mix.md): Baseline 2023 (Chrome 111, Safari 16.2, Firefox 113). Omitir el espacio de color usa oklab por defecto (Safari 26.2, Chrome, Firefox); más de dos colores es más reciente (Chrome 150, Firefox 150). - [oklch() / oklab() colors](https://designforai.dev/es/css/oklch.md): Baseline 2023 (Chrome 111, Safari 15.4, Firefox 113); disponible de forma generalizada. - [Relative color syntax (from)](https://designforai.dev/es/css/relative-color-syntax.md): Baseline 2024 (Chrome 119, Safari 16.4, Firefox 128). - [light-dark()](https://designforai.dev/es/css/light-dark.md): Baseline 2024 (Chrome 123, Safari 17.5, Firefox 120). Los valores de imagen en light-dark() son más recientes (Chrome 150, Firefox 150). - [@property (registered custom properties)](https://designforai.dev/es/css/property.md): Baseline 2024 (Chrome 85, Safari 16.4, Firefox 128). - [text-wrap: balance](https://designforai.dev/es/css/text-wrap.md): Baseline 2024 (Chrome 114, Safari 17.5, Firefox 121). - [Popover attribute + ::backdrop](https://designforai.dev/es/css/popover-attribute.md): Baseline 2024 (Chrome 114, Safari 17, Firefox 125). `popover="hint"` todavía no es Baseline (ver fx-042). - [ improvements (closedby, :modal, requestClose)](https://designforai.dev/es/css/dialog-improvements.md): `` + `:modal` Baseline 2022. Atributo `closedby`: Chrome 134, Firefox 137; Safari pendiente (elemento de Interop 2026), así que no es Baseline a fecha 2026-09. - [@starting-style + transition-behavior: allow-discrete](https://designforai.dev/es/css/starting-style.md): Baseline 2024 (Chrome 117, Safari 17.5, Firefox 129). - [inert attribute](https://designforai.dev/es/css/inert-attribute.md): Baseline 2023 (Chrome 102, Safari 15.5, Firefox 112); disponible de forma generalizada. - [:user-valid / :user-invalid](https://designforai.dev/es/css/user-valid-user-invalid.md): Baseline 2023 (Chrome 119, Safari 16.5, Firefox 88); `:user-invalid` disponible de forma generalizada desde mayo de 2026. - [accent-color](https://designforai.dev/es/css/accent-color.md): Baseline 2022 (Chrome 93, Safari 15.4, Firefox 92); disponible de forma generalizada. Safari 26.2 añadió ajuste automático de legibilidad. - [Stepped value functions: round(), mod(), rem(), abs(), sign()](https://designforai.dev/es/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/es/css/trigonometric-functions.md): Baseline 2023 (Chrome 111, Safari 15.4, Firefox 108); disponible de forma generalizada. - [animation-composition](https://designforai.dev/es/css/animation-composition.md): Baseline 2023 (Chrome 112, Safari 16, Firefox 115). - [offset-path with shapes (motion path)](https://designforai.dev/es/css/offset-path.md): Baseline 2024 para `offset-path` con formas básicas y coord-box (Chrome 116, Safari 16, Firefox 122). `shape()` en offset-path es Baseline 2026 (fx-033). - [CSS masking (mask, mask-image, mask-composite) unprefixed](https://designforai.dev/es/css/masking.md): Baseline 2023 (Chrome 120, Safari 15.4, Firefox 53); disponible de forma generalizada. - [backdrop-filter](https://designforai.dev/es/css/backdrop-filter.md): Baseline 2024 (Chrome 76, Safari 18 sin prefijo, Firefox 103). - [scrollbar-gutter, scrollbar-width, scrollbar-color](https://designforai.dev/es/css/scrollbar-gutter.md): scrollbar-gutter Baseline 2024 (Chrome 94, Safari 18.2, Firefox 97). scrollbar-width Baseline 2024 (Safari 18.2). scrollbar-color recién disponible (Chrome 121, Firefox 64, Safari 26.2). - [Exclusive accordions (details name=) + ::details-content](https://designforai.dev/es/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/es/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/es/css/view-transitions.md): Baseline 2025 (Chrome 111, Safari 18, Firefox 144). `:active-view-transition` Baseline enero de 2026. Tipos de view transition: Chrome 125, Safari 18.2, Firefox 147. - [:open pseudo-class](https://designforai.dev/es/css/open-pseudo-class.md): Baseline 2026 recién disponible (Chrome 133, Firefox 136, Safari 26.5). - [Container style queries (custom properties)](https://designforai.dev/es/css/container-style-queries.md): Baseline 2026 (Chrome 111, Safari 18, Firefox 151 en mayo de 2026). La sintaxis de rangos para style() sigue detrás de un flag en Firefox. - [@scope](https://designforai.dev/es/css/scope.md): Baseline 2026 (Chrome 118, Safari 17.4, Firefox 146 en diciembre de 2025). - [field-sizing: content](https://designforai.dev/es/css/field-sizing.md): Baseline 2026 (Chrome 123, Safari 26.2, Firefox 152 en junio de 2026). - [contrast-color()](https://designforai.dev/es/css/contrast-color.md): Baseline 2026 recién disponible en abril de 2026 (Chrome 147, Firefox 146, Safari 26). - [shape() for clip-path / offset-path](https://designforai.dev/es/css/shape.md): Baseline 2026 (Chrome 135, Safari 18.4, Firefox 148 en febrero de 2026). Chrome 149 también lo permite en `shape-outside`. - [sibling-index() and sibling-count()](https://designforai.dev/es/css/sibling-index.md): Baseline 2026 (Chrome 138, Safari 26.2, Firefox 154 en agosto de 2026). - [text-box-trim / text-box-edge (text-box shorthand)](https://designforai.dev/es/css/text-box-trim.md): Baseline 2026 (Chrome 133, Safari 18.2, Firefox 154 en agosto de 2026). - [Anchor positioning: anchor(), position-area, position-try](https://designforai.dev/es/css/anchor-positioning.md): Baseline 2026 recién disponible (Chrome 125, Safari 26.0, Firefox 147 en enero de 2026). Siguen llegando mejoras (Firefox 148 position-try-order, Safari 26.2 flip-x/flip-y y position-visibility, Chrome 151/Safari 27 position-anchor: normal). Nota: `inset-area` pasó a llamarse `position-area`; usa el nombre nuevo. - [Name-only container queries + comma-separated queries](https://designforai.dev/es/css/name-only-container-queries.md): Consultas solo por nombre Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). Listas de consultas `@container` separadas por comas: Chrome 150. - [lh / rlh units (and rcap, rch, rex, ric)](https://designforai.dev/es/css/lh.md): `lh`/`rlh` Baseline disponible de forma generalizada en mayo 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/es/css/scroll-driven-animations.md): Chrome 115, Safari 26.0; Firefox detrás de `layout.css.scroll-driven-animations.enabled` en estable, habilitado en Firefox 158 Nightly (según caniuse). Área de foco de Interop 2026; Baseline previsto para finales de 2026. - [Cross-document view transitions (@view-transition)](https://designforai.dev/es/css/cross-document-view-transitions.md): Chrome 126, Safari 18.2; Firefox todavía no (caniuse hasta 158). Área de foco de Interop 2026. - [text-wrap: pretty](https://designforai.dev/es/css/text-wrap-2.md): Chrome 117, Safari 26.0 (algoritmo mejorado); Firefox todavía no (caniuse hasta 158). - [popover="hint"](https://designforai.dev/es/css/popover-hint.md): Chrome 133, Firefox 149; Safari pendiente (elemento de Interop 2026), no es Baseline. - [dialog closedby="any" (light-dismiss dialogs)](https://designforai.dev/es/css/dialog-closedby-any.md): Chrome 134, Firefox 137; Safari todavía no (bloqueado desde julio de 2025, elemento de Interop 2026). - [color-mix() with many colors + light-dark() for images](https://designforai.dev/es/css/color-mix-2.md): Chrome 150, Firefox 150 (ambos en 2026); Safari pendiente en los dos casos. - [margin-trim](https://designforai.dev/es/css/margin-trim.md): Safari 16.4 (block; `block inline` en 26.0); Chrome 155 (según caniuse, todavía no estable a fecha 2026-09); Firefox todavía no. No es Baseline. - [Standard line-clamp (unprefixed) and -webkit-line-clamp](https://designforai.dev/es/css/standard-line-clamp.md): `-webkit-line-clamp` (con `display:-webkit-box`) funciona en todas partes. `line-clamp` sin prefijo: detrás de flags en Chrome y Firefox (Firefox 154 `layout.css.line-clamp.enabled`), Safari soporta la sintaxis heredada. No es Baseline. - [CSS Typed OM (CSSStyleValue, attributeStyleMap, CSS.px)](https://designforai.dev/es/css/typed-om.md): Chrome 66, Safari 16.4; Firefox detrás de un flag (Nightly desde 154, agosto de 2026). No es Baseline. - [revert-rule keyword](https://designforai.dev/es/css/revert-rule-keyword.md): Chrome 148, Firefox 150, Safari 27 beta. Todavía no es Baseline (previsto para finales de 2026). - [interpolate-size / calc-size() (animate to height:auto)](https://designforai.dev/es/css/interpolate-size.md): Solo Chrome 129; Firefox y Safari todavía no (2026-09). No es Baseline. - [corner-shape (squircle, scoop, notch, bevel, superellipse())](https://designforai.dev/es/css/corner-shape.md): Solo Chrome 139; Safari y Firefox no tienen calendario público (2026-09). No es Baseline. - [CSS if() conditional function](https://designforai.dev/es/css/if.md): Solo Chrome 137; Safari Technology Preview 249 (julio de 2026), Firefox en desarrollo. No es Baseline. - [@function custom functions](https://designforai.dev/es/css/function-custom-functions.md): Solo Chrome 139; Safari Technology Preview 249, Firefox en desarrollo. No es Baseline. - [reading-flow / reading-order](https://designforai.dev/es/css/reading-flow.md): Solo Chrome 137; Safari y Firefox todavía no (2026-09). No es Baseline. - [CSS carousels: ::scroll-button(), ::scroll-marker(), ::scroll-marker-group](https://designforai.dev/es/css/carousels.md): Solo Chrome 135; Safari y Firefox todavía no (caniuse: sin soporte hasta Safari 27 / Firefox 158). No es Baseline. - [Scroll-state container queries (stuck, snapped, scrollable, scrolled)](https://designforai.dev/es/css/scroll-state-container-queries.md): Chrome 133 (`scrolled` en Chrome 144); Safari y Firefox todavía no (2026-09). No es Baseline. - [text-fit (fit-to-width headlines)](https://designforai.dev/es/css/text-fit.md): Solo Chrome 150 (junio de 2026). No es Baseline. - [background-clip: border-area (gradient borders)](https://designforai.dev/es/css/background-clip.md): Solo Chrome 150 (junio de 2026). No es Baseline. - [Gap decorations (column-rule / row-rule in grid and flex)](https://designforai.dev/es/css/gap-decorations.md): Chrome 149 (junio de 2026). No es Baseline. - [random() and progress() functions](https://designforai.dev/es/css/random.md): `random()`: Safari 26.2 (refinado en 26.5 con `element-scoped`), Firefox detrás de un flag; Chrome en desarrollo. `progress()`: Safari 26.0, Firefox 154 detrás de un flag, Chrome en desarrollo. No es Baseline. - [Grid Lanes (CSS-only masonry)](https://designforai.dev/es/css/grid-lanes.md): Safari 26.4 (abril de 2026); Chrome, Edge y Firefox detrás de flags. No es Baseline. - [Customizable