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
- Animaciones
- Fondos
- Herramientas de Color
- Tipografía
- Cargadores
- Diseños
- Informativo
Generadores de Propiedades
1. Neumorphism
Genera estilos CSS Soft-UI usando sombras internas, por @adamgiebl

2. Shaddows Brumm
Crea y obtén una vista previa de sombras suave y hermosas, por @brumm

3. Fancy Border Radius
Genera objetos con formas interesantes usando border-radius, por @9Elements. Similar a BlobMaker

4. Glow Generator
Genera efectos de brillo CSS puro y compatibles con navegadores cruzados

5. Clothoid Corners
Genera esquinas redondeadas clothoid mediante CSS clip-path, por Takehiko Ono

6. Glassmorphism
Construye fondos semitransparentes y borrosos tipo vidrio. Similar a ui.glass/generator

7. Clipy
Genera objetos con formas complejas usando clip-path, por @bennettfeely

8. CSS Filters
Genera y obtén una vista previa de filtros de fotos CSS puro estilo Instagram, por @ghosh

9. Base64 Image
Codifica una imagen directamente en tu CSS en Base64

10. Quantity Queries
Genera consultas CSS basadas en cantidad, por @drewminns
Animaciones
11. Animista
Área de juegos y generador de animaciones CSS, por Ana T

12. Cubic-Bezier
Obtén una vista previa y genera animaciones cubic bezier avanzadas, por @LeaVerou

13. Keyframes
Creador avanzado de animaciones de fotogramas clave, por @mitchas
14. Wait Animate
Usa animation-delay para simular retrasos, por @will-stone
15. Transition.Style
Copia y pega animaciones de transición, por @argyleink

Fondos
16. Hero Patterns
Encuentra y personaliza fondos con patrones CSS puro simples, por @steveschoger

17. Haikei
Genera banners y fondos SVG orgánicos únicos (similar a Shape Divider)

18. Pattern Generator
Generador de patrones avanzado

19. CSS Pattern
Colección de fondos con patrones CSS puro prefabricados, por @Afif13

20. Patternizer
Construye fondos rayados, por @matthewlein
21. Patternify
Construye tu propio patrón de la vieja escuela, por @SachaGreif

22. Animated BG
Genera fondos CSS puro animados y borrosos, por @Vincenius

23. Trianglify
Diseñador de fondos geométricos (nota: solo semilibre), por @qrohlf

24. Animated Backgrounds
Colección de animaciones de fondos CSS puro
25. Magic Pattern CSS Backgrounds
Colección de patrones de fondo reutilizables basados en SVG / CSS puro, con un explorador visual

Colores
26. CSS Gradient
Constructor avanzado de gradientes CSS
27. Parametric Mixer
Compositor de colores CSS basado en ecualizador, por @dawidwoldu

28. Palettte.
Desarrolla y ajusta esquemas de color

29. Paletton
Constructor de paletas usando colores opuestos o atractivos
30. Grabient
Muestrea gradientes.
Similar a CoolHue, WebGradients.com, GradientHunt, GradientButtons y UI gradients
31. Color Hunt
Otro diseñador de paleta de colores
32. Easing Gradients
Gradientes CSS puro estilo cubic-bezier, por @larsenwork
33. Flat UI Colors
Paletas de colores seleccionadas a mano estilo plano, por @ahmetsulek
34. Color Tools
Mezcla, extrae, convierte y genera colores
35. ColorPalettes.Earth
Paletas de colores naturales de la naturaleza
Tipografía
36. Font Joy
Descubre y obtén una vista previa de varios emparejamientos de fuentes, por @Jack000
37. Type set With Me
Área de pruebas de tipografía y legibilidad, por @tsmith512
38. Type Scale
Genera tamaños de fuente de encabezado/cuerpo, por @jeremychurch
39. Glyphter
Crea fuentes de iconos a partir de gráficos SVG
40. Font-Library
Biblioteca etiquetada de Google Fonts, por @katydecorah
41. Glitter
Exportar texto Glitter estilo años 90
Cargadores
42. Spin Kit
Selección de animaciones de carga CSS limpias

43. Whirl
100+ animaciones de carga CSS, listas para copiar y pegar

44. Loader Generator
Cargadores CSS puros predefinidos y personalizados

45. lukehaas - CSS-Loaders
Animaciones de carga CSS puro simples

46. CSSLoaders
Cargadores CSS puros complejos
47. loading.io/css
Implementaciones CSS de cargadores comunes
Diseños
48. CSS Grid Garden
Juego interactivo para aprender CSS grid, por @thomaspark
49. FlexboxFroggy
Juego interactivo para aprender flexbox, por @thomaspark
50. Flexplorer
Demostración visual de flexbox, por @bennettfeely
51. Flexulator
Una calculadora interactiva de distribución de espacio CSS Flexbox, por @telagraphic
52. Grid Generator
Crear grillas usando las propiedades CSS grid-template, por @sdras (similar a grid.layoutit.com)
53. Layout Generator
Un creador de diseños CSS moderno
54. Box Model Diagram
Solo una demostración visual del modelo de caja
Informativo
55. CSS Timeline
Una historia de CSS
56. Screen Size Map
Ver tamaños de pantalla populares para diseño responsivo
57. CSS Ruler
Previsualizar varias unidades CSS en relación entre sí
58. bada55
Lista de códigos de color hexadecimal CSS muy divertidos
Ver también, colors.lol para algunas paletas de colores excesivamente descriptivas
59. Who can use?
Verifica la calificación de accesibilidad de combinaciones de colores dadas, similar a Colorable
60. Can I use?
Verificación de compatibilidad del navegador de varias características CSS, JS, HTML y web
61. Can I email?
Similar a Can I use?, pero verifica si una propiedad CSS dada (o elemento HTML) es compatible con clientes de correo electrónico
62. CSS Processing Tools
Convertir hacia y desde cualquier otro lenguaje CSS
63. Unused CSS
Busca en tu sitio CSS no utilizado y muestra estadísticas
64. Component.Gallery
Búsqueda global de componentes
65. Design System Gallery
Una colección de sistemas de diseño abiertos, para inspiración
66. Checklist.design
Una colección de mejores prácticas de diseño organizadas como listas de verificación
67. Glyphs
Una lista de códigos de caracteres glifos CSS (ver también GlyphSearch para iconos de biblioteca)
68. CSS-Tricks.com
El mejor blog de CSS que existe
69. Curated Design Tools
Una lista curada de herramientas de diseño impresionantes
70. Awesome-CSS-Frameworks
Una lista de marcos CSS de código abierto
71. CSS Reference
Una guía visual de propiedades CSS (similar a htmlreference.io)
72. MDN CSS Docs
Excelente documentación de todas las propiedades CSS disponibles



































