Sites e recursos CSS realmente utilizáveis: geradores, bibliotecas e ferramentas

November 1, 2026 · 46 min read

Esta pesquisa responde a uma pergunta prática: onde encontrar CSS, fundos, padrões, formas, animações e componentes que possam de fato ser usados em um projeto, sem confundir inspiração visual com código licenciável. Ela complementa a pesquisa anterior sobre 230 recursos CSS e JavaScript para sites IndieWeb: aqui o foco é mais estreito, operacional e verificável, com 205 recursos únicos, indicação do artefato obtido, dependência de JavaScript, situação de licença e adequação para produção.

Resumo executivo

Para criar identidade sem instalar bibliotecas, o melhor núcleo é CSS Pattern, Pattern Monster, Haikei, fffuel, CSS Gradient, MeshSVG, Clippy, css-shape.com, Smooth Shadow e Utopia.
Para copiar componentes, Uiverse/Galaxy, PurelyCSS, CSSUI e CSS Layout são mais diretamente reutilizáveis que galerias genéricas. Mesmo assim, é preciso revisar semântica, foco, contraste e licença por item.
Para movimento, Animista, AnimatiSS, transition.style, Linear Easing Generator, SpinKit e CSS Loaders, de Temani Afif, cobrem quase tudo sem runtime JavaScript.
Para uma base leve, Open Props fornece tokens, CUBE CSS fornece método e Simple.css, Sakura, Chota ou Pure.css fornecem estilos. O Pico.css, recomendado na pesquisa 078, foi arquivado em 4 de outubro de 2026; continua utilizável sob MIT, mas não deve ser tratado como framework em evolução.
Para produção, o trio mínimo de controle é Can I Use/Baseline para compatibilidade, Stylelint para erros e convenções e Project Wallace para complexidade, especificidade e deriva de tokens.
“Copiar” não significa “licença livre”. CodePen, FreeFrontend, CodeMyUI e CSS Script misturam autores e termos. Em agregadores, trate cada snippet como uma obra separada e procure o repositório/licença original.

Metodologia e critérios

A pesquisa foi realizada em 1º de novembro de 2026. Foram examinados sites oficiais, documentação, repositórios e páginas de licença. A pesquisa 078 foi lida integralmente para que esta entrega funcionasse como complemento especializado, não como repetição da lista mista de CSS e JavaScript. A comparação normalizada das URLs encontrou 139 recursos novos e 66 referências canônicas que retornam porque continuam entre as melhores; estas reaparecem agora com avaliação de formato, dependência, licença e prontidão para produção.

Critérios editoriais:

o recurso precisa entregar código, arquivo, técnica ou diagnóstico aproveitável;
ferramentas oficiais e repositórios prevalecem sobre listas secundárias;
geradores sem licença formal explícita são marcados como “termos não claros”, mesmo que ofereçam botão de copiar;
“sem JS” significa que o resultado publicado não exige JavaScript; o gerador pode usar JavaScript internamente;
bibliotecas antigas continuam na lista somente quando o CSS é estável e o risco é fácil de controlar;
galerias comunitárias entram com aviso quando não existe licença uniforme;
efeitos visuais são avaliados também por movimento reduzido, contraste, foco, semântica e custo de renderização.

Legenda

Campo	Significado
CSS	regra ou stylesheet copiável; normalmente sem runtime
HTML+CSS	exige a marcação correspondente, mas não uma biblioteca JavaScript
SVG/PNG	asset exportado, referenciado por HTML ou CSS
JS: não	o site final funciona sem JavaScript para aquele efeito
JS: opcional	JavaScript só alterna estado, injeta classes ou melhora a experiência
JS: sim	há runtime, Web Component ou framework obrigatório
Licença clara	há licença ou termos oficiais suficientes para orientar uso comercial
Por item	o portal não concede uma licença única a tudo que hospeda

Top 30: os melhores pontos de partida

Pos.	Recurso	Melhor uso	O que sai	Licença e limite principal
1	CSS Pattern	157 padrões sofisticados sem imagem	CSS puro	snippets copiáveis; confirme os termos do site antes de redistribuir uma coleção
2	Pattern Monster	padrões editáveis e leves	CSS, SVG, PNG	projeto sob MIT; recursos Pro existem
3	Haikei	composições de fundo, ondas e camadas	SVG, PNG	uso pessoal e comercial, sem atribuição; não use os resultados para montar um gerador concorrente
4	fffuel	grande oficina de formas e texturas SVG	SVG e, em algumas ferramentas, CSS	uso dos resultados é amplo, mas confirme termos do gerador escolhido
5	Doodad Pattern Generator	padrão contínuo autoral	SVG, CSS, PNG/JPEG	o site autoriza projetos comerciais
6	CSS Gradient	gradientes lineares e radiais legíveis	CSS	saída simples; termos do site não equivalem a licença da interface
7	MeshSVG	mesh gradient com ruído	CSS, SVG, PNG	termos oficiais liberam uso comercial e dispensam atribuição
8	Utopia	tipografia e espaçamento fluidos	CSS, SCSS, PostCSS	geradores e bibliotecas abertas; revise zoom e limites de `clamp()`
9	css-shape.com	formas, recortes, cantos e ribbons modernos	CSS	copie como técnica e teste fallback; licença formal não é destacada para todo exemplo
10	Clippy	polígonos com `clip-path`	CSS	código do projeto aberto; resultado sem JS
11	Smooth Shadow	sombras em camadas naturais	CSS	snippet gerado; sem runtime
12	Shadow Palette Generator	sistema coerente de elevação	CSS custom properties	ferramenta didática; não confundir artigo com pacote de assets sublicenciável
13	Animista	keyframes sob medida	CSS	FreeBSD, inclusive para uso comercial; preserve os avisos exigidos pela licença
14	AnimatiSS	animações CSS modulares	CSS	MIT; sem dependências
15	transition.style	transições de entrada e saída	CSS custom properties	projeto aberto; confirme licença no repositório ao empacotar
16	Linear Easing Generator	curvas físicas com `linear()`	CSS	sem runtime; exige fallback quando o suporte-alvo pedir
17	CSS Loaders	loaders de um único elemento	HTML+CSS	copie o efeito e preserve autoria; licença global não é tão explícita quanto em Loading.io
18	Loading.io Pure CSS Loaders	loaders pequenos com licença inequívoca	HTML+CSS	12 loaders sob CC0
19	CSS Layout	padrões de layout e componentes estruturais	HTML+CSS	exemplos copiáveis; confirme licença do repositório
20	Every Layout	layouts algorítmicos resilientes	CSS e Custom Elements	parte gratuita; coleção completa e geradores são pagos
21	Uiverse	botões, cards, inputs, loaders e controles	HTML+CSS ou Tailwind	use preferencialmente o espelho Galaxy sob MIT; confira autor e variante
22	PurelyCSS	componentes comunitários sem scripts	HTML+CSS	gratuito para copiar; faltam termos formais tão robustos quanto MIT em parte do catálogo
23	Open Props	tokens de cor, espaço, sombra e movimento	CSS custom properties	MIT; importe apenas os módulos usados
24	CUBE CSS	arquitetura CSS simples e sustentável	método e exemplos CSS	metodologia, não framework; adapte, não copie uma estética
25	MDN CSS Layout Cookbook	receitas oficiais com explicação	HTML+CSS	conteúdo e exemplos sob licenças da MDN; boa base para produção
26	Can I Use	suporte por navegador e versão	diagnóstico	não substitui teste no público real
27	Baseline	saber se uma feature é nova ou amplamente disponível	diagnóstico	resumo de compatibilidade, não certificado de acessibilidade
28	Stylelint	erros, convenções e autofix	ferramenta de build	MIT; suporte a CSS moderno e plugins
29	Project Wallace	especificidade, tokens e complexidade	relatório	análise online e produtos pagos; CSS enviado merece avaliação de privacidade
30	W3C CSS Validator	sintaxe e conformidade	relatório	gratuito; warnings não substituem compatibilidade nem revisão visual

Catálogo completo: 205 recursos

1. Padrões, fundos e texturas

#	Recurso	Saída e JS no resultado	Licença, uso comercial e veredito
1	CSS Pattern	CSS puro; JS não	Uma das melhores galerias de padrões feitos com gradientes. Copiável e excelente para produção; registre a origem do snippet.
2	CSS3 Patterns Gallery	CSS puro; JS não	Galeria histórica de Lea Verou. Código didático valioso, mas alguns padrões têm créditos individuais; preserve-os.
3	Pattern Monster	CSS, SVG e PNG; JS não	MIT e uso comercial. A versão gratuita é suficiente para muitos fundos; parte do catálogo/API é Pro.
4	Hero Patterns	CSS com SVG embutido ou SVG; JS não	CC BY 4.0: uso comercial permitido com atribuição a Steve Schoger.
5	SVG Backgrounds	SVG/CSS; JS não	Parte grátis e planos pagos. Leia a licença do plano; não presuma que baixar permite revender o asset isolado.
6	BGJar	SVG; JS não	Uso pessoal e comercial; o plano gratuito usa CC BY 4.0 e exige atribuição, enquanto os planos pagos removem o crédito. Não revenda o asset isolado nem monte serviço concorrente.
7	Haikei	SVG e PNG; JS não	Excelente para cenas compostas, ondas, blobs e steps. Os designs gerados podem ser usados em projetos pessoais e comerciais sem atribuição; não podem alimentar um serviço gerador semelhante.
8	fffuel	SVG, PNG e alguns snippets CSS; JS não	Coleção muito ampla: ruído, linhas, grids, blobs, topografias e 3D. Confira os termos do gerador específico.
9	Doodad Pattern Generator	CSS, SVG, PNG/JPEG; JS não	O próprio site autoriza padrões em projetos comerciais. Um dos exports mais versáteis da lista.
10	PatternPad	SVG, PNG e JPG; JS não	Exporta padrões gráficos. O uso comercial gratuito exige crédito/link e a revenda da arte isolada é limitada.
11	MagicPattern CSS Backgrounds	CSS e imagem; JS não	Ferramenta gratuita dentro de produto comercial. Use a saída; packs e outros módulos podem ter termos próprios.
12	Patternify	PNG/data URI e CSS; JS não	Editor pixelado útil, porém legado e sem política de licença moderna evidente. Use para gerar algo próprio, não copiar a galeria.
13	Patternizer	CSS puro; JS não	Gera listras em camadas sem imagens. Projeto estável, mantido por uma pessoa; termos de redistribuição não são destacados.
14	pattern.css	biblioteca CSS; JS não	MIT. Classes prontas de grids, dots, stripes, checks, zigzags e triângulos; boa para protótipo e produção.
15	SVGeneration	CSS e SVG; JS não	600 padrões, MIT, uso comercial e sem atribuição. Recurso atual e particularmente transparente.
16	Cool Backgrounds	PNG e fundos gerados; JS não	Ótimo para criar asset estático. Confirme os termos do gerador e das imagens de terceiros integradas.
17	Wicked Backgrounds	SVG; JS não	Fundos geométricos editáveis. Download utilizável, mas a licença formal deve ser confirmada antes de empacotar em tema comercial.
18	VISIWIG Patterns	SVG/CSS; JS não	Padrões configuráveis para fundo. A coleção tem licença/termos próprios; guarde o link da origem.
19	VISIWIG Textures	SVG; JS não	Texturas vetoriais leves e editáveis. Melhor como camada discreta; confirme condições de uso comercial.
20	Transparent Textures	PNG transparente + CSS; JS não	Texturas de origens diversas. Verifique atribuição/licença da textura escolhida; não há segurança em presumir uma licença única.
21	Subtle Patterns	PNG; JS não	Acervo útil, hoje hospedado pela Toptal. Licença e crédito podem variar por padrão; abra a página do item.
22	Patternico	PNG e padrão por ícones; JS não	Bom para tiles de ícones próprios. Evite marcas/emoji de terceiros sem conferir direitos; termos gerais não substituem a licença do ícone.
23	Trianglify	SVG, Canvas ou PNG; JS sim para gerar no cliente, não para asset exportado	Código sob GPL-3.0 nas versões atuais: distribuir a biblioteca tem obrigações; exportar um fundo estático reduz dependência.
24	GeoPattern	SVG/data URI; JS/Ruby conforme implementação	MIT. Gera padrões determinísticos a partir de texto; ótimo para capas e avatares não pessoais.
25	css-doodle	Web Component, SVG e exports; JS sim no runtime salvo export estático	MIT. Poderoso para arte generativa, mas não é CSS nativo: a sintaxe depende do componente.

2. Gradientes, cor e ruído

#	Recurso	Saída e JS no resultado	Licença, uso comercial e veredito
26	CSS Gradient	CSS; JS não	Gerador confiável para linear/radial e fallback. Sem licença explícita para o site inteiro; o snippet trivial é o valor principal.
27	Gradient.style	CSS; JS não	Gradientes multicamada mais expressivos. Copie o CSS, mas confira termos antes de republicar a coleção.
28	Gradient Hunt	CSS; JS não	Galeria comunitária. Serve para paleta e protótipo; não presuma exclusividade ou licença uniforme sobre cada combinação.
29	Gradienta	CSS e imagem; JS não	Gradientes multicoloridos prontos. Verifique termos atuais e evite revender a coleção como asset pack.
30	WebGradients	CSS e PNG; JS não	Coleção aberta com repositório; boa para prototipar. Preserve o aviso de licença do pacote que baixar.
31	Grabient	CSS; JS não	Editor de stops muito rápido. Resultado copiável; termos formais pouco visíveis pedem cautela em kits redistribuídos.
32	CoolHue	CSS e paletas; JS não	Projeto sob MIT. Presets simples; melhor ponto de partida que identidade final.
33	Mesher	CSS; JS não	Simula mesh com múltiplos `radial-gradient()`. Ótimo por continuar como CSS puro; confirme termos do serviço.
34	MeshSVG	CSS, Tailwind, SVG e PNG; JS não	Termos explícitos: uso pessoal/comercial, sem atribuição; export até 4K e processamento local.
35	Meshy	CSS e imagem, conforme modo; JS não	Mesh gradient interativo. Confira a licença do output e valide peso quando exportar raster grande.
36	Colorffy Mesh Gradient	CSS e imagem; JS não	Gera composição com cores próprias. Termos não são tão claros quanto MeshSVG; use com registro da origem.
37	Grainy Gradients	CSS/SVG filter; JS não	Técnica de gradiente com ruído. Ótima para aprender; confira o repositório/licença antes de copiar a implementação inteira.
38	Noise & Gradient	CSS, SVG e PNG; JS não	Export royalty-free declarado pelo site. A textura pode aumentar bastante o SVG; otimize e compare com WebP/AVIF.
39	Omatsuri Gradient Generator	CSS; JS não	Omatsuri é open source; gera CSS limpo. Excelente alternativa auditável aos geradores sem repositório.
40	ColorSpace Gradient	CSS e paletas; JS não	Gera gradientes e paletas. Use como exploração; termos de uso do portal devem ser revistos para redistribuição.
41	OKLCH Color Picker	valores CSS `oklch()` e fallbacks; JS não	Ferramenta aberta de Evil Martians. Essencial para cores perceptualmente consistentes; cheque fallback no público-alvo.
42	Color.js	valores em vários espaços de cor; JS não para o valor, biblioteca opcional	Projeto aberto. Excelente para converter e comparar gamuts; a biblioteca é necessária apenas se fizer conversão no cliente.
43	Huetone	tokens/paleta CSS; JS não	Ferramenta open source para paletas com contraste. Produz sistema, não só amostras; valide texto real e estados.
44	Leonardo	tokens e paletas adaptativas; JS opcional	Projeto open source da Adobe. Útil para relações de contraste; confirme a licença do pacote e teste além do cálculo.
45	Accessible Palette	paleta e valores; JS não	Ajuda a construir escalas com contraste previsível. Não substitui WCAG/APCA, teste em contexto nem revisão de daltonismo.

3. Formas, ondas, blobs, bordas, máscaras e `clip-path`

#	Recurso	Saída e JS no resultado	Licença, uso comercial e veredito
46	Blobmaker	SVG; JS não	Blobs editáveis e leves. Termos não aparecem com a mesma clareza de uma licença OSS; use o export, não replique o gerador.
47	Get Waves	SVG; JS não	Onda simples e eficiente. Ótimo para divider estático; confirme termos atuais do serviço.
48	SVG Shape Dividers	HTML/CSS/SVG; JS não	Diversos divisores com editor. Parte do ecossistema SVG Backgrounds, com limites entre gratuito e premium.
49	Shape Divider App	HTML/CSS/SVG; JS não	Copia divisor responsivo. Licença formal pouco destacada; revise o SVG e a acessibilidade decorativa (`aria-hidden`).
50	CSS Section Separator Generator	CSS puro; JS não	Separadores sem SVG, bons para aprender pseudo-elementos. Confirme licença do snippet ao redistribuir em template.
51	Clippy	CSS `clip-path`; JS não	Editor consagrado e com código aberto. Produção forte para polígonos, com fallback natural para retângulo.
52	Fancy Border Radius	CSS `border-radius`; JS não	Gera formas orgânicas usando oito raios. Projeto aberto; excelente para blobs simples sem SVG.
53	CSS Shape	CSS moderno; JS não	Coleção excepcional de círculos, polígonos, cantos, recortes e shapes responsivos. Teste suporte de `mask` e `shape()` e crie fallback.
54	CSS Generators	CSS; JS não	Ferramentas de Temani Afif para ribbons, bordas, cortes, ondas e padrões. Código muito bom; licença global não é tão explícita quanto um pacote MIT.
55	Smooth.ie	SVG; JS não	Gerador histórico de ondas entre seções. O resultado é estático; otimize o path e confirme termos de uso.
56	Blobmixer	SVG; JS não	Combina blobs e gradientes. Use o asset exportado e verifique termos, sobretudo para packs revendidos.
57	Blob Animation	CSS/SVG animado; JS não no efeito	Produz morph de blob. Respeite `prefers-reduced-motion` e confira licença atual do código gerado.
58	Super Designer	SVG/PNG/CSS conforme ferramenta; JS não	Suíte de backgrounds, shapes, padrões e blobs. Há recursos gratuitos e pagos; veja os termos do plano.
59	SVG Wave	SVG e CSS de incorporação; JS não	Editor direto de ondas. Termos de uso devem ser confirmados; remova metadados desnecessários e otimize.
60	SVG Path Editor	path/SVG; JS não no resultado	Projeto open source. Excelente para limpar, transformar e normalizar paths antes de usar como máscara.
61	SVG Path Visualizer	SVG/path; JS não	Ajuda a inspecionar comandos e pontos. Ferramenta técnica, não um banco de assets; o path inserido continua sendo seu.
62	SVG Filters	SVG filter + CSS; JS não	Playground de Yoksel para filtros. Recurso didático poderoso; confirme licença no repositório e teste desempenho.
63	CSS Portal Ribbon Generator	HTML+CSS; JS não	Ribbons copiáveis. Sem licença OSS uniforme para todo o portal; prefira adaptar o código gerado.
64	CSS Portal Border Radius Generator	CSS; JS não	Bom para raios assimétricos comuns. Resultado trivial; não há dependência de produção.
65	MDN Border-image Generator	CSS; JS não	Ferramenta oficial para `border-image`. Excelente para compreender slices; exemplos MDN têm licenças documentadas.

4. Sombras, vidro, neumorfismo e filtros

#	Recurso	Saída e JS no resultado	Licença, uso comercial e veredito
66	Smooth Shadow	CSS multicamada; JS não	Gera sombras progressivas muito melhores que uma sombra única. Código copiável; confirme termos do site para redistribuição em massa.
67	Shadow Palette Generator	CSS custom properties; JS não	Cria uma escala coerente de elevação. Excelente como sistema; artigo não concede licença blanket para republicar todo o material.
68	Neumorphism.io	CSS; JS não	Projeto BSD-3-Clause. Útil para experimentar, mas contraste e estados costumam falhar; não faça a interface inteira neumórfica.
69	Glassmorphism Generator	CSS; JS não	Gera blur, borda e transparência. Verifique termos da Hype4 e forneça fundo opaco quando `backdrop-filter` não existir.
70	Glass UI	CSS; JS não	Editor de cards de vidro. Resultado simples; termos formais pouco evidentes. Teste contraste sobre todos os fundos.
71	Glass CSS	CSS; JS não	Gerador direto de glassmorphism. Copiável, sem runtime; confirme termos atuais e evite transparência em texto longo.
72	CSS Scan Box Shadows	CSS; JS não	Coleção com copiar. CSS Scan é produto comercial; verifique termos antes de usar a coleção em gerador/tema para revenda.
73	CSSmatic Box Shadow	CSS; JS não	Ferramenta antiga mas funcional. Boa para sombra simples; a política de licença não é tão clara quanto em projeto OSS.
74	CSS Portal Box Shadow Generator	CSS; JS não	Editor básico e copiável. Ideal para valores próprios, não para copiar presets como identidade final.
75	AngryTools Box Shadow	CSS; JS não	Controle visual amplo. Saída pronta; confirme termos do portal para uso comercial em packs.
76	Omatsuri CSS Shadow Generator	CSS; JS não	Ferramenta open source e auditável. Ótima para evitar geradores fechados.
77	CSS Filter Generator	CSS `filter`; JS não	Converte cor para cadeia de filtros aproximada. Projeto aberto; valide a diferença de cor e prefira SVG/CSS nativo quando possível.
78	CSS Filter Converter	CSS `filter`; JS não	Conversor rápido para recolorir ícones monocromáticos. Resultado aproximado; termos do site não são licença do ícone original.
79	SVG Color Matrix Mixer	SVG `feColorMatrix`; JS não	Editor técnico para matrizes de cor. O output é código; confirme termos e mantenha fallback para imagens essenciais.
80	Filter Blend	CSS filters/blend modes; JS não	Laboratório de Bennett Feely para combinar filtros e modos. Excelente para experimentar, mas pode ser caro na GPU.

5. Animação, easing, loaders, texto e hover

#	Recurso	Saída e JS no resultado	Licença, uso comercial e veredito
81	Animate.css	biblioteca CSS; JS opcional para disparar classes	MIT. Madura e ampla; importe só os efeitos usados e adicione política de movimento reduzido.
82	Animista	keyframes CSS selecionados; JS não	Excelente editor de duração, atraso, direção e curva. O CSS gerado usa licença FreeBSD e pode ser empregado comercialmente, preservando os avisos exigidos.
83	AnimatiSS	classes CSS; JS não	MIT. Animações divididas por categoria e fáceis de importar individualmente.
84	Hover.css	CSS/Sass; JS não	MIT. Grande coleção de hover/focus; aplique também em `:focus-visible` e não esconda informação no hover.
85	Magic Animations	CSS; JS opcional	MIT. Efeitos teatrais e chamativos; use como detalhe, nunca em navegação recorrente.
86	WickedCSS	CSS; JS não	MIT. Pequena biblioteca de animações peculiares; atividade menor, mas o CSS é inspecionável e fácil de fixar localmente.
87	CSShake	CSS/Sass; JS não	MIT. Variações de shake; podem incomodar pessoas sensíveis a movimento e não devem sinalizar erro sozinhas.
88	vov.css	CSS; JS não	MIT. Classes leves de entrada, saída e atenção; teste manutenção e importe seletivamente.
89	Woah.css	CSS; JS não	MIT no repositório. Efeitos experimentais; melhor para easter eggs que para interface central.
90	Catto-CSS	CSS; JS não	MIT. Animações nomeadas e copiáveis; verifique estado do projeto e fixe a versão.
91	CSS Wand	HTML+CSS; JS não	Efeitos e microinterações copiáveis. Licença deve ser verificada por projeto; boa fonte de técnicas, não de identidade pronta.
92	transition.style	CSS custom properties; JS não	Gera transições compactas e parametrizadas. Excelente para entrada/saída com HTML sem framework.
93	AnimXYZ	CSS/Sass; JS não, integrações opcionais	MIT. Sistema composável por variáveis; mais sustentável que dezenas de classes rígidas.
94	Motion UI	Sass/CSS; JS opcional	MIT, mantido no ecossistema Foundation. Bom para transições e séries; exige build Sass para customização plena.
95	cubic-bezier.com	valor CSS; JS não	Editor consagrado de curvas cúbicas. Resultado é um valor; curvas não físicas ainda precisam ser testadas em contexto.
96	Easings.net	CSS/Sass e referências; JS não	Cheat sheet open source. Algumas curvas com bounce/elástico não cabem em `cubic-bezier()` e exigem keyframes.
97	Easing Wizard	CSS; JS não	Constrói easing e visualiza movimento. Confirme termos; ótimo para evitar curvas escolhidas apenas pelo nome.
98	Linear Easing Generator	CSS `linear()`; JS não	Converte curvas complexas em pontos. Use fallback e consulte Can I Use/Baseline conforme seus navegadores-alvo.
99	Keyframes.app	CSS keyframes, sombras e cores; JS não	Editor visual com recursos gratuitos. Produto hospedado: confira plano e termos antes de depender do armazenamento.
100	CSS Animation Rocks	tutoriais e CSS; JS geralmente não	Material didático de Donovan Hutchinson. Use para entender a técnica; exemplos não formam um pacote com licença uniforme.
101	Animatopy	CSS; JS não	Pequena biblioteca open source de hover. Útil como código legível; projeto de baixa atividade pede cópia local e testes.
102	Hamburgers	Sass/CSS; JS opcional para alternar estado	MIT. Anima apenas o ícone; o botão ainda precisa de nome acessível, `aria-expanded` e lógica de menu.
103	SpinThatShit	Sass/CSS; JS não	MIT. Mixins de spinners; manutenção reduzida, mas saída compilada é simples e auditável.
104	Loading.io Pure CSS Loaders	HTML+CSS; JS não	12 loaders sob CC0, menores que 1,6 KB por ícone. Melhor opção quando licença inequívoca é prioridade.
105	CSS Loaders	um elemento + CSS; JS não	Mais de 600 loaders de Temani Afif. Técnica excepcional; confirme os termos do site antes de redistribuir uma seleção.
106	SpinKit	HTML+CSS; JS não	MIT. 12 spinners conhecidos; projeto antigo, porém CSS pequeno e estável.
107	loaders.css	HTML+CSS; JS opcional	MIT. Biblioteca ampla; o helper JS/jQuery não é necessário para a animação em si.
108	Whirl	CSS/Sass; JS não	MIT. Mais de cem loaders; importe um efeito, não o bundle completo.
109	CSS Loader Library — Colorion	HTML+CSS; JS não	99 loaders sem dependências, sob MIT e com `prefers-reduced-motion`. Alternativa atual e com licença explícita.
110	CSS Loading Spinners	HTML+CSS; JS não	MIT. Coleção pequena, explícita e fácil de auditar; boa quando 600 opções seriam distração.
111	Epic Spinners	componentes Vue + CSS; JS sim	MIT. Visualmente interessante, mas não é escolha para HTML/CSS puro; use apenas em projeto Vue compatível.
112	LDRS	Web Components + CSS/SVG; JS sim	MIT. Componentes pequenos e bonitos; runtime obrigatório, portanto prefira CSS puro se um spinner simples bastar.
113	Balloon.css	CSS por atributos; JS não	MIT. Tooltips leves; conteúdo importante não deve existir apenas no tooltip, e mobile/touch exige cuidado.
114	Hint.css	CSS; JS não	MIT. Tooltips com `aria-label`; ainda é preciso testar foco, zoom, toque e conteúdo ampliado.
115	Textillate.js	CSS + jQuery + lettering.js; JS sim	MIT. Útil como referência histórica; para projeto novo, prefira keyframes nativos ou segmentação menor sem jQuery.

6. Grid, Flexbox, layouts e tipografia fluida

#	Recurso	Saída e JS no resultado	Licença, uso comercial e veredito
116	Layoutit Grid	HTML+CSS Grid; JS não	Open source sob MIT. Editor visual completo, incluindo áreas nomeadas; ótimo para prototipar e depois limpar o código.
117	CSS Grid Generator — Sarah Drasner	HTML+CSS; JS não	Open source sob MIT. Simples e didático; a URL antiga `netlify.com` não é a canônica atual.
118	CSSGridGenerator.io	HTML+CSS; JS não	Gerador rápido de linhas/colunas. Não foi localizado repositório/licença pública clara; use para criar valores próprios.
119	CSS Layout	HTML+CSS; JS normalmente não	Coleção de padrões por Phuoc Nguyen. Código diretamente adaptável; confira licença do repositório e semântica.
120	MDN CSS Layout Cookbook	HTML+CSS; JS não	Receitas oficiais para media object, colunas, center, sticky footer, split navigation e mais. Forte para produção.
121	web.dev Patterns — Layout	HTML+CSS; JS não	Exemplos do Google sob licenças documentadas no site. Inclui padrões modernos e explicação de trade-offs.
122	Every Layout	CSS e Custom Elements; JS opcional	Layouts algorítmicos sem breakpoints mágicos. Parte do conteúdo é livre; edição completa custa US$ 69 na data da pesquisa.
123	1-Line Layouts	CSS; JS não	Dez padrões compactos e explicados. Código é ponto de partida, não competição de menor número de linhas.
124	Grid by Example	HTML+CSS; JS não	Referência de Rachel Andrew com exemplos testáveis. Excelente para copiar estrutura entendendo a especificação.
125	Flexbox Patterns	HTML+CSS; JS não	Receitas de UI baseadas em Flexbox. Confirme licença do projeto e ajuste HTML/acessibilidade ao caso real.
126	Flexbox Froggy	aprendizado; não entrega componente final	Open source. Jogo curto para dominar alinhamento; não é banco de snippets.
127	Grid Garden	aprendizado; CSS de exercícios	Open source. Ensina Grid visualmente; use para entender, não para copiar uma página pronta.
128	Flexbox Defense	aprendizado; CSS de exercícios	Jogo educativo legado. Funciona como prática, mas não substitui documentação moderna.
129	Grid Critters	curso/jogo pago	Licença de acesso, não de redistribuição. Excelente aprendizagem profunda; não é asset gratuito.
130	Flexbox Zombies	curso/jogo	Acesso sujeito aos termos da Mastery Games. Bom para aprender Flexbox com repetição e narrativa.
131	CSS Gridish	CSS/SCSS gerado; JS no build	Licença aberta no repositório; foi arquivado em 18 de julho de 2024. Útil apenas para estudar geração de Grid com fallback Flexbox legado.
132	Layout Generator — Brad Woods	HTML+CSS; JS não	Construtor visual de Grid/Flex. Confirme licença/termos; revise o código antes de usar em produção.
133	Utopia Fluid Type Calculator	CSS, SCSS e PostCSS; JS não	Gera escala com `clamp()` por viewport ou container. Aberto e documentado; teste zoom a 200%.
134	Utopia Fluid Space Calculator	CSS, SCSS e PostCSS; JS não	Cria tokens de espaço e pares fluidos. Melhor que inventar dezenas de breakpoints.
135	Type Scale	valores/CSS; JS não	Compara escalas modulares e fontes. Recursos Pro existem; confirme termos de exportação.
136	Modular Scale	valores e Sass; JS não no resultado	Calculadora clássica. Boa para raciocínio, mas escalas rígidas podem precisar de Utopia para fluidez.
137	Fluid Type Scale Calculator	CSS `clamp()`; JS não	Gera escala completa entre dois viewports. Confirme termos e valide que o mínimo não prejudica leitura.
138	Fluid Type Scale com `clamp()` — Aleksandr Hovhannisyan	fórmula e CSS; JS não	Explica a matemática, limitações de acessibilidade e implementação de uma escala fluida; melhor que colar valores sem entendê-los.
139	Min-Max-Value Interpolation	CSS `clamp()`; JS não	Calculadora da 9elements para qualquer propriedade fluida. Útil para entender a fórmula e evitar números mágicos.
140	Clamp Calculator — Marc Bacon	CSS `clamp()`; JS não	Alternativa atual depois que `fluid.style` saiu do ar em 2026. Gera valor para tipografia ou espaço; confirme unidades e zoom.

7. Componentes, snippets, geradores gerais e playgrounds

#	Recurso	Saída e JS no resultado	Licença, uso comercial e veredito
141	Uiverse	HTML+CSS ou Tailwind; JS geralmente não	Comunidade ampla. Prefira itens espelhados no Galaxy sob MIT; confira autor, tecnologia e acessibilidade.
142	Uiverse Galaxy	arquivos HTML/CSS/Tailwind; JS não	MIT. Espelho aberto de milhares de elementos; melhor referência jurídica/técnica que copiar cegamente da interface.
143	CSS Buttons	HTML+CSS; JS não	Botões comunitários copiáveis. Licença pode variar por contribuição; reimplemente estados e foco, e preserve créditos quando indicados.
144	Copy Paste CSS	CSS; JS não	Componentes estilizados prontos. Termos não equivalem a MIT universal; use como base e confira a origem.
145	PurelyCSS	HTML+CSS; JS bloqueado nos exemplos	Biblioteca nova com mais de 200 elementos e playground. Gratuita para copiar, mas a política formal de licença merece confirmação por uso comercial.
146	CSSUI	HTML+CSS; JS não	Componentes interativos com CSS moderno. Open source; ótimo para estudar `:checked`, `details`, toggles e estados.
147	FreeFrontend	HTML+CSS/JS conforme exemplo	Agregador, licença por item. Sempre abra CodePen/repositório original; não use o catálogo como autorização.
148	CodeMyUI	snippets e links de origem; JS variável	Inspiração e descoberta, não biblioteca licenciada de modo uniforme. Confira autor, dependências e licença.
149	CodeHim	HTML/CSS/JS; JS variável	Muitos componentes completos. Licença por projeto/artigo; revise segurança, dependências e manutenção.
150	CSS Script	CSS/JS e links para projetos	Diretório secundário. Útil para achar projetos; baixe apenas do upstream e siga sua licença.
151	CodePen	HTML/CSS/JS; JS variável	Playground essencial, mas código público não é automaticamente open source. Procure licença explícita do Pen/autor.
152	JSFiddle	HTML/CSS/JS; JS variável	Bom para reproduções mínimas e testes. A visibilidade de um fiddle não concede licença para uso comercial.
153	PlayCode	projeto web exportável; JS variável	Playground com preview e npm. Plano gratuito existe; confirme privacidade e termos de projetos salvos.
154	StackBlitz	projeto completo; JS variável	Excelente para demos de frameworks e WebContainers. Licença do código é a do projeto, não a do playground.
155	CodeSandbox	projeto completo; JS variável	Forte para protótipos compartilháveis. Confira visibilidade, limites do plano e licença do template.
156	Glitch	aplicação remixável; JS variável	Histórico importante de remix, mas situação de produto/hosting mudou ao longo do tempo; confirme disponibilidade atual antes de depender dele.
157	Liveweave	HTML/CSS/JS; JS variável	Editor ao vivo e showcase. Bom para experimento; termos/licenças continuam por criação.
158	Codeply	HTML/CSS/frameworks; JS variável	Playground orientado a Bootstrap, Tailwind e outros. Use para integração, não como fonte de licença.
159	WebCode Tools	CSS, HTML e metatags; JS não no output	Geradores para CSS moderno, HTML e Schema. Saída direta; confirme termos do serviço.
160	10015 Tools — CSS	CSS; JS não	Muitos geradores em um só portal. Conveniente, mas menos transparente que ferramentas OSS; registre origem e revise output.
161	CSS Portal Generators	CSS/HTML; JS não	Suite extensa: columns, scrollbar, text, transforms, shapes e mais. Sem licença uniforme evidente; use para valores próprios.
162	AngryTools CSS Generator	CSS; JS não	Editor geral para gradiente, sombra, transform e texto. Útil, mas termos precisam ser conferidos.
163	EnjoyCSS	CSS; JS não	Editor visual amplo, com plano/limites. Bom para protótipo; limpe o CSS gerado e confira licença do serviço.
164	Omatsuri	CSS, SVG e dados; JS não no resultado	Suíte open source com gradiente, sombra, triângulo, cursor, ruído e mais. Uma das melhores caixas de ferramentas auditáveis.
165	Component Gallery	referência e links; não é código único	Compara nomes e implementações de componentes em design systems. Excelente para decidir padrões; não é uma licença para copiar componentes.

8. CSS art, desafios e galerias com técnica

#	Recurso	Saída e JS no resultado	Licença, uso comercial e veredito
166	CSSBattle	CSS de soluções; JS não	Jogo para treinar precisão e shorthand. Soluções pertencem aos autores; pratique, não copie arte para produto sem autorização.
167	100 Days CSS	HTML+CSS; JS às vezes	Desafios diários com soluções comunitárias. Ótimo estudo; licença não é uniforme por solução.
168	A Single Div	HTML mínimo + CSS; JS não	Galeria histórica de Lynn Fisher. Inspiração técnica autoral; não reproduza ilustrações como seus assets sem permissão.
169	CSS Zen Garden	CSS sobre HTML fixo; JS não	Demonstra separação de conteúdo e apresentação. Designs têm autores e direitos; use como estudo.
170	Lynn and Tonic	CSS/HTML inspecionável; JS variável	Portfólio que muda por breakpoint. Excelente referência de composição responsiva; não é biblioteca de código.
171	CSS Art	galeria e código variável	Diretório de arte em CSS. Licença por obra/autor; peça permissão para reutilização comercial.
172	Daily CSS Images	tutoriais HTML+CSS	Curso/desafio de ilustrações. Use para aprender; acesso e licença seguem os termos do curso.
173	Species in Pieces	CSS polygons; JS no site	Obra artística de Bryan James. Referência extraordinária de `clip-path`; não é banco de assets reutilizáveis.
174	Houdini.how	Paint Worklets + CSS; JS sim	Galeria de CSS Houdini com exemplos e repositórios. Verifique licença por worklet e suporte; sempre forneça fallback.
175	Codrops Playground	HTML/CSS/JS; JS variável	Experimentos de alto nível com artigo e fonte. Licença por demo/repositório; bom para engenharia, não para copiar aparência inteira.

9. Frameworks leves, classless CSS, resets e tokens

#	Recurso	Saída e JS no resultado	Licença, uso comercial e veredito
176	Open Props	CSS custom properties; JS não	MIT. Tokens modulares de cor, espaço, tipo, sombra, easing e media queries; importe apenas os módulos usados.
177	Pure.css	módulos CSS; JS não	BSD-3-Clause. Cerca de 3,5 KB min+gzip para o conjunto base, responsivo e pouco opinativo.
178	Chota	CSS; JS não	MIT. Microframework baseado em variáveis, grid e utilitários; atividade menor, mas código pequeno e fácil de manter localmente.
179	Milligram	CSS/Sass; JS não	MIT. Base minimalista conhecida; visual datado se usada sem personalização, mas boa para protótipo e formulários simples.
180	Picnic CSS	CSS/SCSS; JS mínimo/dispensável em muitos componentes	MIT. Framework leve e visual. Verifique componentes interativos e estado de manutenção antes de adoção longa.
181	Fylgja	CSS/Sass, tokens e componentes	MIT. Modular e moderno; oferece design tokens e utilitários sem exigir um framework JavaScript.
182	CUBE CSS	metodologia e CSS	Método de composição, utilidades, blocos e exceções. Não é pacote; excelente para manter o CSS autoral compreensível.
183	Simple.css	stylesheet classless; JS não	MIT. Mantido e ideal para documentos, blogs e protótipos sem classes; personalize variáveis para evitar aparência padrão.
184	Water.css	stylesheet classless; JS não	MIT. Tema automático claro/escuro para HTML sem classes; último ritmo de manutenção é menor, mas o CSS é estável.
185	Sakura	CSS/SCSS classless; JS não	MIT. Tipografia limpa e temas. Bom para Markdown renderizado; projeto recebeu atividade em 2026.
186	new.css	stylesheet classless; JS não	MIT. Um link já estiliza HTML semântico; manutenção mais espaçada, portanto fixe a versão local.
187	MVP.css	stylesheet classless; JS não	MIT. Elementos semânticos e classes opcionais para landing pages; ativo em 2026 e fácil de adaptar.
188	modern-normalize	CSS reset/normalize; JS não	MIT. Corrige diferenças modernas sem apagar toda a folha do navegador. Base segura e pequena.
189	The New CSS Reset	CSS reset; JS não	MIT. Usa `all: unset` de forma calculada; poderoso, mas pode remover comportamentos úteis se aplicado sem entender exceções.
190	sanitize.css	CSS normalize modular; JS não	CC0-1.0. Módulos para forms, typography, assets e redução de movimento; selecione o necessário.

O que aconteceu com Pico.css

Pico.css continua tecnicamente bom e sob MIT, mas o repositório foi arquivado em 4 de outubro de 2026 e a versão 2.1.1 foi declarada final. CDN, npm e site devem permanecer, porém não haverá novas correções ou recursos. Para site novo, as alternativas mais seguras desta lista são Simple.css ou Sakura para classless, Pure.css ou Chota para módulos e Open Props + CSS autoral para controle máximo.

10. Compatibilidade, acessibilidade e qualidade do CSS

#	Recurso	Entrega	Licença, limite e veredito
191	MDN CSS	referência, exemplos e tabelas de compatibilidade	Primeira parada para sintaxe, acessibilidade e especificação. Conteúdo e snippets têm licenças documentadas pela MDN.
192	web.dev Learn CSS	curso e padrões	Material moderno do Google. Exemplos têm licenciamento documentado; complemente com MDN e testes reais.
193	Can I Use	suporte por browser/versão	Dados abertos. Leia notas e subfeatures: um quadrado verde geral pode esconder limitações específicas.
194	Web Platform Dashboard / Baseline	status Baseline e interoperabilidade	Indica “newly” e “widely available”. Não cobre acessibilidade, bugs de layout do seu caso nem browsers fora do conjunto.
195	W3C CSS Validator	validação sintática	Serviço gratuito e oficial. CSS válido ainda pode ser incompatível, inacessível ou visualmente quebrado.
196	Stylelint	lint, autofix e convenções	MIT, ativo e com mais de cem regras. Use `stylelint-config-standard` e adicione regras aos poucos.
197	Project Wallace	métricas, tokens, especificidade e qualidade	Analisa URL, arquivo ou CSS colado. Excelente para dívida sistêmica; avalie privacidade antes de enviar CSS fechado.
198	CSS Stats	relatório visual de tamanhos, cores, fontes e regras	Open source. Bom raio-X rápido; não interpreta intenção e não substitui lint.
199	Lightning CSS	parser, bundler, prefixer, transpiler e minificador	MPL-2.0. Ativo, escrito em Rust e integrado a ferramentas como Vite; configure browsers-alvo conscientemente.
200	PostCSS Preset Env	transpila CSS futuro por estágios/alvos	MIT no ecossistema CSSTools. Não habilite propostas experimentais sem plano de compatibilidade.
201	Autoprefixer	vendor prefixes a partir de Browserslist	MIT. Não use prefixos manuais copiados de geradores antigos; configure alvos e deixe a ferramenta decidir.
202	Browserslist	consulta e configuração de navegadores-alvo	MIT. Compartilha a política entre Autoprefixer, Babel e bundlers; baseie-a em usuários reais.
203	PurgeCSS	remove seletores aparentemente não usados	MIT. Pode apagar classes dinâmicas; crie safelist e teste todos os estados, CMS e conteúdo futuro.
204	axe-core	testes automatizados de acessibilidade	MPL-2.0. Detecta parte dos problemas; teclado, zoom, leitura, movimento e cognição ainda exigem teste manual.
205	Polypane	navegador pago para responsividade e acessibilidade	Comercial. Testa múltiplos viewports, media queries, contraste e acessibilidade; excelente para QA, não necessário para começar.

O que é realmente copiável

Situação	Pode copiar diretamente?	Procedimento seguro
Gerador produz valor CSS (`gradient`, `shadow`, `clip-path`, `clamp`)	Em geral, sim	Guarde URL/data, revise output e confirme termos se for redistribuir em tema ou gerador.
Repositório MIT/BSD/Apache/CC0	Sim, respeitando a licença	Preserve `LICENSE`, avisos e atribuições exigidas na distribuição.
Asset sob CC BY	Sim, inclusive comercialmente	Dê crédito de modo razoável; Hero Patterns é o caso mais importante desta lista.
Página pública no CodePen ou galeria comunitária	Não automaticamente	Procure licença explícita do autor ou peça autorização. “View Source” não é licença.
SVG/PNG exportado por ferramenta freemium	Depende do plano	Leia termos sobre uso comercial, atribuição, revenda e templates.
Tutorial/artigo com snippet	Normalmente para aprendizagem e adaptação	Não republie artigo, coleção ou demo inteira; cite a origem e confira licença do código.
Componente Tailwind/React/Vue	Só se o projeto usa a dependência	Não chame de “CSS puro”; contabilize runtime, pacote e licença.

Combinações recomendadas

1. Blog IndieWeb autoral, leve e sem JavaScript visual

Base: modern-normalize + Open Props.
Escala: Utopia Type + Space.
Fundo: CSS Pattern ou Pattern Monster.
Forma: Clippy ou Fancy Border Radius.
Movimento: transition.style, apenas sob prefers-reduced-motion: no-preference.
QA: Stylelint + Can I Use + axe-core.

Resultado: HTML semântico e CSS local, sem biblioteca de componentes e sem chamadas externas. É a combinação mais alinhada ao desejo de uma web pessoal que não pareça template.

2. Zine digital áspera, impressa e estranha

Haikei ou fffuel para uma textura SVG estática;
CSS Shape para recortes e cantos;
AnimatiSS para uma única entrada curta;
Utopia para impedir que a tipografia experimental exploda no celular;
Project Wallace para encontrar cores, sombras e tamanhos duplicados.

Não aplique ruído em texto nem faça a textura cobrir tudo. Gere o asset, comprima-o e mantenha uma cor sólida por baixo.

3. Interface retrô ou “software imaginário”

Sakura ou Simple.css como baseline semântico;
Uiverse/Galaxy para um ou dois controles específicos;
CSS Pattern para grid/scanlines;
CSS Portal ou Omatsuri para sombras e transforms;
Balloon.css para dicas não essenciais.

Reescreva a semântica dos snippets: muitos botões visuais são <div>, inputs não têm label e tooltips dependem de hover.

4. Landing page com mesh gradient e vidro, sem runtime

MeshSVG para fundo CSS/SVG;
Glass CSS para o painel;
Shadow Palette para elevação coerente;
Utopia para tipo/spacing;
Linear Easing Generator para uma animação curta;
fallback opaco quando backdrop-filter não existir.

Essa combinação entrega a estética contemporânea sem Three.js, canvas ou vídeo. O custo principal passa a ser pintura/composição, não JavaScript.

5. Protótipo rápido que ainda pode virar produto

Pure.css ou Chota;
CSS Layout para padrões estruturais;
Uiverse somente em componentes isolados;
Layoutit Grid para a primeira composição;
Stylelint desde o primeiro commit;
Lightning CSS no build final.

Evite começar por FreeFrontend/CodePen sem licença: um protótipo temporário tende a sobreviver e virar dívida jurídica e técnica.

6. Página artística experimental com fallback honesto

css-doodle ou Houdini.how para uma cena decorativa;
export SVG/PNG quando a interação não for essencial;
conteúdo, links e navegação em HTML normal;
@supports para features novas;
imagem estática sob prefers-reduced-motion: reduce;
teste no Polypane ou em navegadores reais com Baseline/Can I Use como referência.

Recomendações práticas

Uma ordem de trabalho que evita CSS de colagem

escreva HTML semântico e faça a página funcionar sem decoração;
defina tokens próprios de cor, tipo, espaço, radius e sombra;
escolha um gerador de fundo, um sistema de forma e um vocabulário de movimento;
salve os exports localmente em vez de depender do site gerador em produção;
registre origem, licença, data, autor e modificações em CREDITS.md;
substitua cores/tamanhos soltos por custom properties;
rode Stylelint e valide compatibilidade;
teste teclado, zoom a 200%, 320–390 px, modo escuro, contraste e movimento reduzido;
examine o CSS inteiro no Project Wallace;
só então minifique/transpile com Lightning CSS ou PostCSS.

Regras para backgrounds e texturas

Prefira CSS puro para padrões geométricos simples.
Prefira SVG para ondas, blobs e formas vetoriais complexas.
Prefira PNG/WebP/AVIF quando filtros SVG com ruído ficarem caros ou enormes.
Nunca coloque textura forte atrás de parágrafos longos.
Defina uma cor de fundo sólida antes da imagem para carregamento e fallback.
Evite data URI gigantes dentro do CSS: elas prejudicam cache, inspeção e manutenção.

Regras para animação

:root {
  --duration-fast: 140ms;
  --duration-medium: 260ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
}

.card {
  transition:
    transform var(--duration-medium) var(--ease-standard),
    box-shadow var(--duration-medium) var(--ease-standard);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover {
    transform: translateY(-0.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

A regra global é um ponto de partida conservador, não dogma: animações que comunicam estado podem ser substituídas por atualização imediata ou fade discreto, em vez de simplesmente sumirem.

Checklist antes de publicar um snippet copiado

Recursos que eu evitaria como primeira escolha

Pico.css para projeto novo de longo prazo: continua bom, mas foi arquivado e não receberá evolução.
fluid.style: o domínio saiu do ar em 2026; use Utopia, 9elements ou Marc Bacon.
Geradores sem termos para um produto que redistribui templates: produzir um site é diferente de vender novamente a saída como biblioteca.
Agregadores como fonte jurídica: FreeFrontend, CodeMyUI, CSS Script e CodePen são índices; a licença está no autor/upstream.
Glassmorphism e neumorphism como linguagem inteira: ambos falham facilmente em contraste, estados, densidade e impressão.
Loader animado para esperas sem contexto: prefira skeleton, progresso real ou mensagem; spinner não explica o que está acontecendo.
CSS art como asset comercial copiado: a técnica é visível, mas a obra continua autoral.

Conclusão

O melhor ecossistema CSS não é uma única biblioteca: é uma cadeia de ferramentas pequenas. Um gerador cria a matéria-prima; um sistema de tokens dá coerência; uma fonte oficial explica a feature; ferramentas de compatibilidade e qualidade impedem que a decoração quebre o site.

Para começar hoje, a combinação mais forte é Open Props + Utopia + CSS Pattern ou Pattern Monster + css-shape.com/Clippy + Animista/transition.style + Stylelint + Project Wallace. Ela produz resultado autoral, majoritariamente CSS puro, sem prender o projeto a framework JavaScript. Haikei, fffuel e MeshSVG entram quando o fundo precisa de SVG; Uiverse/Galaxy entra apenas para componentes pontuais e licenciados.

A regra decisiva é simples: copie valores e técnicas com licença clara; adapte componentes; trate galerias comunitárias como descoberta, não como autorização; e sempre deixe o conteúdo funcionar quando o efeito, a imagem, o JavaScript ou a feature nova falhar.

Fontes consultadas

Nota sobre atualidade

Pesquisa concluída em 1º de novembro de 2026. Sites, planos, licenças, catálogos, domínios e suporte de navegadores mudam com frequência. Confirme a página oficial e a licença do item escolhido antes de uso comercial, redistribuição ou adoção em produção.

Did this resonate?

Related