# Recursos CSS Súper Útiles 🌈 (70 seleccionados a mano)

**URL:** <https://www.yodev.dev/t/super-useful-css-resources-70-hand-picked/1032>\
**Category:** Desarrollo\
**Tags:** codenewbie, webdev, open-source, css\
**Created:** [13 Enero, 2026 20:55 UTC](https://www.yodev.dev/t/super-useful-css-resources-70-hand-picked/1032 "2026-01-13T20:55:36Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Grego](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/grego/32/649_2.png) [@Grego](https://www.yodev.dev/u/Grego)\
**Post date:** [13 Enero, 2026 20:55 UTC](https://www.yodev.dev/t/super-useful-css-resources-70-hand-picked/1032/1 "2026-01-13T20:55:36Z")

</div>

# Recursos CSS Súper Útiles 🌈

Si te gusta esto, visita el sitio de Alicia para más. Enlace al final del artículo. ❤

* * *

> Una colección de 70 herramientas seleccionadas a mano, basadas en web, que son realmente útiles.  
> Cada una generará CSS puro sin necesidad de JS o ninguna biblioteca externa.

> Todo el crédito va a los autores detrás de cada una de estas aplicaciones (donde fue posible, he vinculado a su GH/ redes sociales)

### Contents

- [Generadores de Propiedades](#property-generators)
- [Animaciones](#animations)
- [Fondos](#backgrounds)
- [Herramientas de Color](#colors)
- [Tipografía](#typography)
- [Cargadores](#loaders)
- [Diseños](#layouts)
- [Informativo](#informative)

## Generadores de Propiedades

### 1. [Neumorphism](https://neumorphism.io)

> Genera estilos CSS Soft-UI usando sombras internas, por [@adamgiebl](https://github.com/adamgiebl)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/0/0c3447ab43ffe1cc672908231f4a8137b2ede8ac.gif)

### 2. [Shaddows Brumm](https://shadows.brumm.af/)

> Crea y obtén una vista previa de sombras suave y hermosas, por [@brumm](https://github.com/brumm)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/0/0e9652d50fde3c2ad9d41cf29296764033a68aae.gif)

### 3. [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/)

> Genera objetos con formas interesantes usando border-radius, por [@9Elements](https://github.com/9elements). Similar a [BlobMaker](https://www.blobmaker.app/)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/8/836c8295425e6ac7d2557e0f01f55db19a88db2d.gif)

### 4. [Glow Generator](https://cssbud.com/css-generator/css-glow-generator/)

> Genera efectos de brillo CSS puro y compatibles con navegadores cruzados

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/1/1935c8d934838dfa57e857ca1e90c7dec835baa7.gif)

### 5. [Clothoid Corners](https://onotakehiko.dev/clothoid/)

> Genera esquinas redondeadas clothoid mediante CSS clip-path, por [Takehiko Ono](https://onotakehiko.com/)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/4/465a88c304a1e6fe276007424d9446c10416281a.gif)

### 6. [Glassmorphism](https://hype4.academy/tools/glassmorphism-generator)

> Construye fondos semitransparentes y borrosos tipo vidrio. Similar a [ui.glass/generator](https://ui.glass/generator/)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/5/55970001ef46c169b54eced1da5c60f6e1d41386.gif)

### 7. [Clipy](https://bennettfeely.com/clippy/)

> Genera objetos con formas complejas usando clip-path, por [@bennettfeely](https://github.com/bennettfeely)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/1/128b98362869e26e9becb399be20c7096517860c.gif)

### 8. [CSS Filters](https://www.cssfilters.co/)

> Genera y obtén una vista previa de filtros de fotos CSS puro estilo Instagram, por [@ghosh](https://github.com/ghosh)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/c/c5eaef167adeedf2743e7f030b026cd78f76a407.gif)

### 9. [Base64 Image](https://www.base64-image.de/)

> Codifica una imagen directamente en tu CSS en Base64

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/7/7b23a9c31ba73d1b47c585a1bd6cb74f085bf409.gif)

### 10. [Quantity Queries](https://quantityqueries.com/)

> Genera consultas CSS basadas en cantidad, por [@drewminns](https://github.com/drewminns)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/3/369d3ce85bc9165e2ae0d4e215c38ba1d7726446.png)

* * *

## Animaciones

### 11. [Animista](https://animista.net/play)

> Área de juegos y generador de animaciones CSS, por [Ana T](https://www.linkedin.com/in/anatravas)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/b/b2b9560294cc30b1fc71b7b24396b25760261e26.gif)

### 12. [Cubic-Bezier](https://cubic-bezier.com/)

> Obtén una vista previa y genera animaciones cubic bezier avanzadas, por [@LeaVerou](https://github.com/LeaVerou)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/b/b69c3a470f7c16308546aacc2a1cb8e00351db75.gif)

### 13. [Keyframes](https://keyframes.app/animate)

> Creador avanzado de animaciones de fotogramas clave, por [@mitchas](https://github.com/mitchas)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/2/2031c34bbddbdbe1a4ad5e9a6675e153275eb4d2.png)

### 14. [Wait Animate](https://waitanimate.wstone.uk/)

> Usa animation-delay para simular retrasos, por [@will-stone](https://github.com/will-stone)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/f/f1b69a967afe38a9d1431143ed8671048a1786d2.png)

### 15. [Transition.Style](https://www.transition.style)

> Copia y pega animaciones de transición, por [@argyleink](https://github.com/argyleink)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/7/77007a57b044dd2e28b87471e7552689c3c4644d.gif)

* * *

## Fondos

### 16. [Hero Patterns](https://heropatterns.com/)

> Encuentra y personaliza fondos con patrones CSS puro simples, por [@steveschoger](https://twitter.com/steveschoger)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/4/4cb0530e3525c05ca29d9fff71e36420fcc134d3.gif)

### 17. [Haikei](https://app.haikei.app/)

> Genera banners y fondos SVG orgánicos únicos (similar a [Shape Divider](https://www.shapedivider.app/))

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/a/a04180f70edcc661d99478e83984dbcf4870d0d0.gif)

### 18. [Pattern Generator](https://doodad.dev/pattern-generator/)

> Generador de patrones avanzado

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/1/1aba7ddf360a5808f3fbf7eafa8603f448226127.gif)

### 19. [CSS Pattern](https://css-pattern.com/)

> Colección de fondos con patrones CSS puro prefabricados, por [@Afif13](https://github.com/Afif13)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/7/76f6e9db2edaa8f9f9d10bbe9946ef084e17b323.gif)

### 20. [Patternizer](https://patternizer.com)

> Construye fondos rayados, por [@matthewlein](https://twitter.com/matthewlein)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/2/23c859abca801b08e53d67185ef4d5d7a22c04e0.png)

### 21. [Patternify](http://www.patternify.com/)

> Construye tu propio patrón de la vieja escuela, por [@SachaGreif](https://twitter.com/SachaGreif)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/8/890dc78ab2da809ee4b3d57e2197af3a22b73eb3.gif)

### 22. [Animated BG](https://wweb.dev/resources/animated-css-background-generator/)

> Genera fondos CSS puro animados y borrosos, por [@Vincenius](https://github.com/Vincenius)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/c/c852eaa264965cfca6a2c5f36aa2f502d10b0fe4.gif)

### 23. [Trianglify](https://trianglify.io/)

> Diseñador de fondos geométricos (nota: solo semilibre), por [@qrohlf](https://github.com/qrohlf)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/b/bd5f98e4f6eedfc63b14b7a3ae11925808a3dbad.gif)

### 24. [Animated Backgrounds](https://animatedbackgrounds.me)

> Colección de animaciones de fondos CSS puro

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/d/d1d58fbf453a0ee640be5d957af9f2ce112b27db.jpeg)

### 25. [Magic Pattern CSS Backgrounds](https://www.magicpattern.design/tools/css-backgrounds)

> Colección de patrones de fondo reutilizables basados en SVG / CSS puro, con un explorador visual

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/4/4cb0530e3525c05ca29d9fff71e36420fcc134d3.gif)

* * *

## Colores

### 26. [CSS Gradient](https://cssgradient.io/)

> Constructor avanzado de gradientes CSS

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/e/e7e7cc5868ac19f8424bd4b23efd40b06498b2eb.png)

### 27. [Parametric Mixer](https://colormixer.web.app)

> Compositor de colores CSS basado en ecualizador, por [@dawidwoldu](https://twitter.com/dawidwoldu)

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/1/1ae184853ec729068440bb19d8ac4c4db2fcc50f.gif)

### 28. [Palettte.](https://palettte.app/)

> Desarrolla y ajusta esquemas de color

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/5/56b2ec8066f70bd4ffa5aa382a9128fbeef2cec1.gif)

### 29. [Paletton](https://paletton.com)

> Constructor de paletas usando colores opuestos o atractivos

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/3/334ad99b060fdc7b3cec01beba781604b45d8b69.jpeg)

### 30. [Grabient](https://www.grabient.com/)

> Muestrea gradientes.  
> Similar a [CoolHue](https://webkul.github.io/coolhue/), [WebGradients.com](https://webgradients.com/), [GradientHunt](https://gradienthunt.com/), [GradientButtons](https://gradientbuttons.colorion.co/) y [UI gradients](https://uigradients.com)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/f/f7aff626278b88ae39e0bd1c8310253588b225a5.png)

### 31. [Color Hunt](https://colorhunt.co/)

> Otro diseñador de paleta de colores

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/d/d010f88b6f87a4daca9b6872a29ae2e6a1bb855b.png)

### 32. [Easing Gradients](https://larsenwork.com/easing-gradients/#editor)

> Gradientes CSS puro estilo cubic-bezier, por [@larsenwork](https://github.com/larsenwork)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/3/33da350c80fb71c390cc414baad07c3df521aa39.png)

### 33. [Flat UI Colors](https://flatuicolors.com/)

> Paletas de colores seleccionadas a mano estilo plano, por [@ahmetsulek](https://twitter.com/ahmetsulek)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/b/b17afe60b302b580b68319c6e2c688ba470c7814.png)

### 34. [Color Tools](https://colordesigner.io/tools)

> Mezcla, extrae, convierte y genera colores

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/9/9977cc28fc99c806d3ce4dd3961e484bbbf5e927.png)

### 35. [ColorPalettes.Earth](https://colorpalettes.earth/)

> Paletas de colores naturales de la naturaleza

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/2/20a3d280b361b2a47ed329578e411316821f5370.jpeg)

* * *

## Tipografía

### 36. [Font Joy](https://fontjoy.com/)

> Descubre y obtén una vista previa de varios emparejamientos de fuentes, por [@Jack000](https://github.com/Jack000)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/f/fa1843303e6d355c19ed95ca418e405ba0ab2925.png)

### 37. [Type set With Me](https://typesetwith.me/)

> Área de pruebas de tipografía y legibilidad, por [@tsmith512](https://github.com/tsmith512)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/f/fe76c94d4494d0ffaae1beab932a1ed733cade37.png)

### 38. [Type Scale](https://type-scale.com/)

> Genera tamaños de fuente de encabezado/cuerpo, por [@jeremychurch](https://github.com/jeremychurch)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/1/180f27cf0e706f36d9418a681c350290b27c9a0a.png)

### 39. [Glyphter](https://glyphter.com/)

> Crea fuentes de iconos a partir de gráficos SVG

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/0/0e5f09dea34150943c5c4e2db61a712516d9bd4b.png)

### 40. [Font-Library](https://katydecorah.com/font-library)

> Biblioteca etiquetada de Google Fonts, por [@katydecorah](https://github.com/katydecorah)
> 
> ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/f/f39b5bd6a6375d6cb152ea83a2ab2671e94062f0.png)

### 41. [Glitter](https://wh0.github.io/glitter/)

> Exportar texto Glitter estilo años 90

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/d/d3ef11818a20e77b0fc099288355a43fe78709d8.png)

* * *

## Cargadores

### 42. [Spin Kit](https://tobiasahlin.com/spinkit/)

> Selección de animaciones de carga CSS limpias

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/b/b767adc7a2f9c0927ab6ae80ac8859b63bfdd43b.gif)

### 43. [Whirl](https://whirl.netlify.app/)

> 100+ animaciones de carga CSS, listas para copiar y pegar

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/c/c0b08bbc890819ef019005c38b4664256abbd435.gif)

### 44. [Loader Generator](https://www.cssportal.com/css-loader-generator/)

> Cargadores CSS puros predefinidos y personalizados

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/0/03aa95023a27ac8ffe2567b06532d7e8de910324.gif)

### 45. [lukehaas - CSS-Loaders](https://projects.lukehaas.me/css-loaders/)

> Animaciones de carga CSS puro simples

![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/b/b0262e415742fc73ec197322e3db3c6327466bf4.gif)

### 46. [CSSLoaders](https://cssloaders.github.io/)

> Cargadores CSS puros complejos

### 47. [loading.io/css](https://loading.io/css/)

> Implementaciones CSS de cargadores comunes

* * *

## Diseños

### 48. [CSS Grid Garden](https://cssgridgarden.com/)

> Juego interactivo para aprender CSS grid, por [@thomaspark](https://github.com/thomaspark)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/8/842464f9c1376b3e5d249390be6ac0dfcf735eae.png)

### 49. [FlexboxFroggy](https://flexboxfroggy.com/)

> Juego interactivo para aprender flexbox, por [@thomaspark](https://github.com/thomaspark)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/a/acec3b1306ef8b760abdca8a2eabebfc48d95b69.png)

### 50. [Flexplorer](https://bennettfeely.com/flexplorer/)

> Demostración visual de flexbox, por [@bennettfeely](https://twitter.com/bennettfeely)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/4/4d80bfd3a04b4550be4325bbd3e4fabcf878cc14.png)

### 51. [Flexulator](https://www.flexulator.com/)

> Una calculadora interactiva de distribución de espacio CSS Flexbox, por [@telagraphic](https://github.com/telagraphic)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/4/42353f9b56316ab66ad3b55510ad7071d2b232c4.png)

### 52. [Grid Generator](https://cssgrid-generator.netlify.app/)

> Crear grillas usando las propiedades CSS grid-template, por [@sdras](https://github.com/sdras) (similar a [grid.layoutit.com](https://grid.layoutit.com/))

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/8/87310cd4ae7aa7dc11b5a6b3cedfd81c629b2e35.png)

### 53. [Layout Generator](https://layout.bradwoods.io/)

> Un creador de diseños CSS moderno

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/f/f077c7a782f2b61a2e43b0ed8d862a3e66cadef7.png)

### 54. [Box Model Diagram](https://codepen.io/carolineartz/full/ogVXZj)

> Solo una demostración visual del modelo de caja

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/5/5f2b8943c119abc9d8edf45e47afdb67822828b1.png)

* * *

## Informativo

### 55. [CSS Timeline](https://css-timeline.vercel.app/)

> Una historia de CSS

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/0/0a39d20b4706b8575df1ef31390172c8934552df.png)

### 56. [Screen Size Map](https://screensizemap.com/)

> Ver tamaños de pantalla populares para diseño responsivo

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/8/82d6365dd951812bd550da2d7179ce62c75d45a5.png)

### 57. [CSS Ruler](https://katydecorah.com/css-ruler/)

> Previsualizar varias unidades CSS en relación entre sí

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/2/24e8a18f4be3c4047b1cc44a22d3c2d328381727.png)

### 58. [bada55](http://bada55.io/)

> Lista de códigos de color hexadecimal CSS muy divertidos  
> Ver también, [colors.lol](https://colors.lol/) para algunas paletas de colores excesivamente descriptivas

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/5/57683e5a38becd476b455d3e00526b975585d788.png)

### 59. [Who can use?](https://www.whocanuse.com)

> Verifica la calificación de accesibilidad de combinaciones de colores dadas, similar a [Colorable](https://colorable.jxnblk.com/)

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/9/91ef7034d84395cb0ac7bf788b358a46653a86fd.png)

### 60. [Can I use?](https://caniuse.com/)

> Verificación de compatibilidad del navegador de varias características CSS, JS, HTML y web

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/d/d7699544af62753989b4c3b693a0df451b33e7ef.png)

### 61. [Can I email?](https://www.caniemail.com/)

> Similar a [Can I use?](https://caniuse.com), pero verifica si una propiedad CSS dada (o elemento HTML) es compatible con clientes de correo electrónico

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/2/22f878ffc318623626e3d5177ae5febe23f025f6.png)

### 62. [CSS Processing Tools](https://codebeautify.org/css-tools)

> Convertir hacia y desde cualquier otro lenguaje CSS

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/7/79ef374615a1c6c2ede1878431d0458a1a37a83a.png)

### 63. [Unused CSS](https://unused-css.com/)

> Busca en tu sitio CSS no utilizado y muestra estadísticas

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/5/58917e3717e1a40376cbde09782b9699b152af37.png)

### 64. [Component.Gallery](https://component.gallery)

> Búsqueda global de componentes

 ![screenshot](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/6/69957ad096534cba96dd11ae7d0754cc2159e3ba.png)

### 65. [Design System Gallery](https://designsystemsrepo.com/design-systems-recent/)

> Una colección de sistemas de diseño abiertos, para inspiración

### 66. [Checklist.design](https://www.checklist.design/)

> Una colección de mejores prácticas de diseño organizadas como listas de verificación

### 67. [Glyphs](https://css-tricks.com/snippets/html/glyphs/)

> Una lista de códigos de caracteres glifos CSS (ver también [GlyphSearch](https://glyphsearch.com) para iconos de biblioteca)

### 68. [CSS-Tricks.com](https://css-tricks.com/)

> El mejor blog de CSS que existe

### 69. [Curated Design Tools](https://github.com/kudapara/curated-design-tools)

> Una lista curada de herramientas de diseño impresionantes

### 70. [Awesome-CSS-Frameworks](https://github.com/troxler/awesome-css-frameworks)

> Una lista de marcos CSS de código abierto

### 71. [CSS Reference](https://cssreference.io/)

> Una guía visual de propiedades CSS (similar a [htmlreference.io](https://htmlreference.io/))

### 72. [MDN CSS Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)

> Excelente documentación de todas las propiedades CSS disponibles

| Si te gusta este tipo de cosas,  
considera seguir para más 🙂 | [![Follow Lissy93 on GitHub](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/8/8efe1ac487d91a42d3fc7e50f445c45c1178d635.svg)](https://github.com/Lissy93)[![Follow Lissy_Sykes on Twitter](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/a/a62543a0a968f35bf4f263a37713db4c8e06e47e.svg)](https://twitter.com/Lissy_Sykes) |
| --- | --- |