Murad Library
Murad LibraryREF-0307MD

Pesquisa: 500 sites e recursos gratuitos para enfeitar sites com CSS e JavaScript

Catalogued
Reading
23 min read

Compilado por Pablo Murad — 2026
Data da pesquisa: 2026-06-14

Critério bruto, sem romantizar

Esta lista prioriza recursos gratuitos, open-source, copy-paste, documentações oficiais, bibliotecas com plano gratuito, geradores visuais e coleções úteis para deixar sites mais bonitos ou interativos. Mesmo assim, alguns projetos têm planos pagos, licenças específicas para uso comercial, ou mudam regra com o tempo. Antes de usar em projeto comercial, confira a licença do item específico. Não seja inocente: “free” em página de marketing nem sempre significa “livre para qualquer uso”.

Como usar

  • Para resolver rápido: comece por Uiverse, Stylosheet, Animista, CSS Gradient, Haikei, Animate.css, Alpine.js, Swiper, Chart.js e AOS.
  • Para site simples: use Pico CSS, Simple.css, Water.css, MVP.css ou new.css.
  • Para site moderno com controle visual: use Tailwind CSS + daisyUI/Flowbite/HyperUI.
  • Para interatividade sem complicar: Alpine.js, HTMX, Tippy.js, SweetAlert2, Toastify, Swiper e AOS.
  • Para gráficos: Chart.js primeiro; D3 só se você realmente precisar de controle avançado.

Parte 1 — 250 recursos gratuitos de CSS, UI, templates, efeitos, cores e decoração

#RecursoCategoriaPara que serveFacilidade
1BootstrapFramework CSS/JSBase responsiva completa, componentes prontos.Fácil
2Tailwind CSSUtility-first CSSClasses utilitárias para criar layout visual rápido.Médio
3BulmaFramework CSSFramework moderno baseado em Flexbox.Fácil
4FoundationFramework CSSGrid, componentes e padrões responsivos.Médio
5Pure.cssMicro framework CSSMódulos pequenos para grids, menus e forms.Fácil
6TachyonsFunctional CSSClasses pequenas para montar interfaces rápidas.Médio
7UIkitUI frameworkComponentes elegantes e responsivos.Fácil
8MaterializeMaterial Design CSSComponentes estilo Material Design.Fácil
9Semantic UIUI frameworkComponentes semânticos e fáceis de ler.Médio
10Fomantic UIUI frameworkFork comunitário do Semantic UI.Médio
11Spectre.cssLightweight frameworkFramework leve e limpo.Fácil
12Primer CSSDesign system CSSSistema de interface usado pelo GitHub.Médio
13PatternFlyDesign systemComponentes corporativos open-source.Médio
14Carbon Design SystemDesign systemSistema visual da IBM com CSS/components.Médio
15Clarity Design SystemDesign systemUI kit open-source para apps web.Médio
16ShoelaceWeb components + CSSComponentes web customizáveis com temas CSS.Fácil
17Ionic FrameworkMobile UI componentsComponentes visuais para apps/web mobile.Médio
18Onsen UIMobile UIComponentes para interfaces mobile híbridas.Médio
19Framework7Mobile UI frameworkUI estilo iOS/Android para web apps.Médio
20Metro UI CSSUI frameworkInterface inspirada no estilo Metro/Windows.Fácil
21NES.cssRetro CSSEstética 8-bit/NES para sites.Fácil
22XP.cssRetro CSSInterface estilo Windows XP.Fácil
2398.cssRetro CSSInterface estilo Windows 98.Fácil
247.cssRetro CSSInterface estilo Windows 7.Fácil
25MVP.cssClassless CSSDeixa HTML puro bonito sem classes.Muito fácil
26Pico CSSClassless/minimal CSSHTML semântico com visual limpo.Muito fácil
27Water.cssClassless CSSMelhora HTML simples automaticamente.Muito fácil
28SakuraClassless CSSTema minimalista para páginas simples.Muito fácil
29Simple.cssClassless CSSCSS leve para sites simples.Muito fácil
30Classless.deClassless themesTemas CSS sem classes para HTML básico.Muito fácil
31Tufte CSSEditorial CSSEstilo ensaio/livro com sidenotes.Fácil
32LaTeX.cssAcademic CSSAparência de documento LaTeX na web.Muito fácil
33MarxClassless CSSCSS minimalista para HTML padrão.Muito fácil
34TacitClassless CSSTipografia limpa para sites simples.Muito fácil
35new.cssClassless CSSCSS leve e moderno para HTML sem classes.Muito fácil
36Holiday.cssClassless CSSTema agradável para páginas simples.Muito fácil
37Bamboo CSSClassless CSSHTML puro com aparência amigável.Muito fácil
38ChotaMicro CSS frameworkFramework minúsculo e responsivo.Fácil
39MilligramMinimal frameworkCSS minimalista com grid simples.Fácil
40SkeletonBoilerplate CSSBase responsiva pequena para sites.Fácil
41Mini.cssMini frameworkComponentes e layout em poucos KB.Fácil
42Picnic CSSLightweight CSSFramework leve para componentes rápidos.Fácil
43Blaze UIUI toolkitComponentes CSS abertos e modulares.Fácil
44CirrusCSS frameworkFramework moderno com utilitários e componentes.Fácil
45TurretCSSCSS frameworkFramework semântico e responsivo.Médio
46Base CSSCSS frameworkBase minimalista para projetos web.Fácil
47Concise CSSCSS frameworkFramework limpo e modular.Fácil
48Wing CSSMinimal frameworkFramework minúsculo para landing pages.Fácil
49Mustard UICSS frameworkFramework limpo para prototipagem.Fácil
50Material Design LiteMaterial CSSComponentes Material Design clássicos.Fácil
51daisyUITailwind componentsComponentes prontos para Tailwind.Fácil
52FlowbiteTailwind componentsComponentes Tailwind com exemplos.Fácil
53Preline UITailwind componentsComponentes e plugins gratuitos Tailwind.Fácil
54HyperUITailwind snippetsComponentes Tailwind gratuitos para copiar.Fácil
55Tailwind ComponentsTailwind examplesComunidade de componentes Tailwind.Fácil
56Tailwind UI Kit FreeTailwind kitBlocos Tailwind gratuitos.Fácil
57Meraki UITailwind componentsComponentes Tailwind bonitos e gratuitos.Fácil
58TailblocksTailwind blocksBlocos prontos para landing pages.Muito fácil
59Kometa UI KitTailwind componentsComponentes e templates Tailwind gratuitos.Fácil
60Mamba UITailwind componentsComponentes e templates Tailwind.Fácil
61WindstrapTailwind Bootstrap-likeComponentes Bootstrap reimaginados no Tailwind.Fácil
62KuttyTailwind plugin/componentsComponentes acessíveis para Tailwind.Fácil
63Notus JS/TailwindTailwind kitStarter kit gratuito baseado em Tailwind.Médio
64Material TailwindTailwind Material UIComponentes Material com Tailwind.Fácil
65Headless UIHeadless componentsComponentes acessíveis para estilizar com CSS/Tailwind.Médio
66Radix UI ThemesUI theme systemSistema visual gratuito para apps React.Médio
67shadcn/uiCopy-paste componentsComponentes bonitos com Tailwind/Radix.Médio
68Aceternity UIAnimated UI snippetsComponentes modernos animados para Tailwind.Médio
69Magic UIAnimated componentsComponentes Tailwind/React com animações.Médio
70Origin UIUI componentsComponentes gratuitos para copiar.Fácil
71Float UITailwind templatesComponentes e templates Tailwind gratuitos.Fácil
72Creative Tim Tailwind Starter KitTailwind starterKit gratuito de páginas e componentes.Médio
73Sailboat UITailwind componentsComponentes Tailwind para dashboards e páginas.Fácil
74TW ElementsTailwind componentsComponentes inspirados em Bootstrap para Tailwind.Fácil
75Skeleton UISvelte/Tailwind UIUI toolkit para Svelte com Tailwind.Médio
76DaisyUI Theme GeneratorTheme generatorGerador gratuito de temas daisyUI.Muito fácil
77ThemeWagon Free TemplatesFree templatesTemplates HTML/CSS gratuitos.Fácil
78HTML5 UPFree templatesTemplates responsivos gratuitos.Muito fácil
79TemplatedFree templatesTemplates HTML5/CSS responsivos.Muito fácil
80Free CSSFree templatesCentenas de templates CSS gratuitos.Fácil
81Start BootstrapBootstrap templatesTemas e templates Bootstrap gratuitos.Muito fácil
82BootstrapMade FreeBootstrap templatesTemplates Bootstrap grátis.Fácil
83Colorlib Free TemplatesWebsite templatesTemplates gratuitos para sites.Fácil
84One Page Love TemplatesLanding templatesTemplates gratuitos para landing pages.Fácil
85Cruip Free TemplatesLanding templatesTemplates gratuitos modernos.Fácil
86TooplateHTML templatesTemplates HTML/CSS gratuitos.Fácil
87Nicepage Free TemplatesHTML templatesTemplates HTML editáveis; verificar licença por item.Fácil
88Themefisher FreeBootstrap templatesTemplates gratuitos Bootstrap.Fácil
89GrayGrids FreeBootstrap templatesTemplates Bootstrap gratuitos.Fácil
90UIdeck Free TemplatesTemplatesTemplates gratuitos para landing pages.Fácil
91StyleShoutFree templatesTemplates HTML5/CSS gratuitos.Fácil
92FreeHTML5.coFree templatesTemplates HTML5 gratuitos.Fácil
93W3Layouts FreeTemplatesTemplates gratuitos; conferir licença.Fácil
94Mobirise Free TemplatesTemplatesTemplates HTML gratuitos e blocos visuais.Fácil
95CodropsCSS experimentsEfeitos, layouts e microinterações criativas.Médio
96CSS-Tricks AlmanacCSS referenceReferência prática de propriedades CSS.Fácil
97MDN CSSDocs CSSDocumentação confiável de CSS.Fácil
98Can I useCompatibilityVerifica suporte de recursos CSS nos navegadores.Muito fácil
99Web.dev CSSCSS learning/referenceGuia gratuito de CSS moderno.Fácil
100SmolCSSCSS snippetsSnippets modernos pequenos e úteis.Fácil
101Modern CSS SolutionsCSS snippetsSoluções modernas para problemas comuns.Fácil
102Every LayoutLayout CSSPadrões de layout robustos; parte grátis útil.Médio
1031-Line LayoutsCSS layoutsLayouts úteis em uma linha de CSS.Muito fácil
104CSS Layout GeneratorLayout generatorGerador visual de grids/flex layouts.Muito fácil
105CSS Grid GeneratorGrid generatorCria CSS Grid visualmente.Muito fácil
106Grid GardenCSS Grid gameAprenda Grid jogando.Muito fácil
107Flexbox FroggyFlexbox gameAprenda Flexbox jogando.Muito fácil
108Flexbox DefenseFlexbox gameTreino divertido de Flexbox.Muito fácil
109CSS Grid Garden GuideGrid learningPrática rápida para posicionamento Grid.Muito fácil
110AnimistaCSS animationsGerador de animações CSS prontas.Muito fácil
111Animate.cssCSS animation libraryAnimações CSS prontas via classes.Muito fácil
112Hover.cssCSS hover effectsEfeitos hover prontos para botões e links.Muito fácil
113CSShakeCSS shake animationsAnimações de tremor em CSS.Muito fácil
114WhirlCSS loadersLoaders CSS prontos e leves.Muito fácil
115SpinKitCSS loadersLoaders CSS bonitos e fáceis.Muito fácil
116CSS LoadersCSS loadersGrande coleção de loaders puros em CSS.Muito fácil
117Loading.io CSS SpinnerCSS loadersSpinners CSS gratuitos.Muito fácil
118LDRSLoadersLoaders web modernos e leves.Fácil
119Epic SpinnersCSS spinnersColeção de spinners CSS/Vue.Fácil
120CSS WandCSS effectsEfeitos CSS copiados em um clique.Muito fácil
121UIVerseCSS/Tailwind componentsComponentes open-source para copiar.Muito fácil
122CSS ButtonsButton effectsBotões CSS gratuitos e customizáveis.Muito fácil
123Get CSS Scan ButtonsButton examplesExemplos gratuitos de botões CSS.Muito fácil
124CSS PortalCSS toolsGeradores de sombras, gradientes, transformações e mais.Muito fácil
125CSS GradientGradient generatorGerador de gradientes CSS.Muito fácil
126GrabientGradient toolGradientes ajustáveis e copiáveis.Muito fácil
127Gradient HuntGradient galleryGaleria de gradientes grátis.Muito fácil
128CoolHueGradient palettePaletas de gradientes prontas.Muito fácil
129uiGradientsGradient galleryGradientes prontos para CSS.Muito fácil
130Mesh GradientMesh gradientsGerador de gradientes mesh.Muito fácil
131HaikeiSVG/CSS backgroundsGera backgrounds SVG, ondas, blobs e patterns.Muito fácil
132BGJarSVG backgroundsFundos SVG gratuitos editáveis.Muito fácil
133SVG BackgroundsSVG backgroundsFundos SVG prontos; verificar licença por item.Fácil
134Hero PatternsSVG patternsPadrões SVG repetíveis para backgrounds.Muito fácil
135PatternPadPattern generatorCriação visual de padrões para fundo.Muito fácil
136Pattern MonsterSVG patternsPadrões SVG gratuitos e customizáveis.Muito fácil
137MagicPatternPattern toolsFerramentas gratuitas para patterns e blobs.Muito fácil
138Trianglify.ioPattern generatorGera backgrounds geométricos.Muito fácil
139CSS PatternCSS patternsPadrões feitos apenas com CSS.Muito fácil
140Lea Verou CSS3 PatternsCSS patternsPadrões clássicos em CSS puro.Fácil
141Transparent TexturesTexturesTexturas leves para backgrounds.Muito fácil
142Subtle PatternsTexturesPadrões sutis para interfaces.Muito fácil
143BlobmakerBlob generatorGera blobs SVG decorativos.Muito fácil
144Get WavesSVG wavesOndas SVG para seções de landing page.Muito fácil
145Shape Divider AppSection dividersDivisores SVG para seções.Muito fácil
146Fancy Border RadiusBorder radius generatorGera formas orgânicas com border-radius.Muito fácil
147Neumorphism.ioNeumorphism generatorGerador de sombras estilo neumorphism.Muito fácil
148Glassmorphism GeneratorGlassmorphismGera CSS para efeito vidro.Muito fácil
149CSS GlassGlassmorphismGerador simples de glassmorphism.Muito fácil
150Box ShadowsBox shadowsSombras CSS prontas para copiar.Muito fácil
151Shadows BrummShadow generatorGera sombras multicamadas suaves.Muito fácil
152Smooth ShadowShadow generatorSombras realistas em CSS.Muito fácil
153Cubic BezierTiming functionCria easing para transições CSS.Muito fácil
154Easings.netEasing referenceCurvas de easing para animações.Muito fácil
155Ceaser CSS EasingCSS easingGerador clássico de easing CSS.Muito fácil
156Keyframes.appCSS animation toolsFerramentas para animação, box-shadow e gradients.Muito fácil
157AnimXYZCSS animation frameworkAnimações CSS composáveis.Fácil
158WickedCSSCSS animationsAnimações CSS divertidas.Muito fácil
159Tuesday CSSCSS animationAnimações CSS para entradas/saídas.Fácil
160Magic AnimationsCSS animationsBiblioteca de animações CSS.Fácil
161CSS Layout CookbookLayout recipesReceitas de layout confiáveis da MDN.Fácil
162Fluid Type ScaleTypography generatorTipografia fluida com clamp().Muito fácil
163Type ScaleTypography scaleEscalas tipográficas para CSS.Muito fácil
164Modern Fluid Typography EditorFluid typographyGera clamp() para fontes responsivas.Muito fácil
165FontsourceSelf-host fontsPacotes de fontes open-source para projetos.Fácil
166Google FontsFree fontsFontes gratuitas para web.Muito fácil
167Bunny FontsPrivacy-friendly fontsAlternativa gratuita ao Google Fonts.Muito fácil
168Font LibraryOpen fontsBiblioteca de fontes livres.Fácil
169Open FoundryOpen fontsFontes open-source com visual forte.Fácil
170VelvetyneOpen fontsFontes livres e experimentais.Fácil
171League of Moveable TypeOpen fontsFontes open-source clássicas.Fácil
172Use & ModifyOpen fontsCuradoria de fontes abertas.Fácil
173FontpairFont pairingCombinações gratuitas de fontes.Muito fácil
174TypespirationTypography examplesCombinações tipográficas com CSS.Fácil
175Color HuntColor palettesPaletas gratuitas para UI.Muito fácil
176CoolorsColor palettesGerador de paletas grátis.Muito fácil
177Adobe ColorColor palettesFerramenta gratuita para harmonias de cor.Fácil
178PalettonColor scheme toolCria esquemas de cor.Fácil
179ColorSpaceColor gradients/palettesGera paletas e gradientes.Muito fácil
180Happy HuesColor inspirationPaletas aplicadas em UI real.Muito fácil
181Realtime ColorsColor previewTesta paletas em landing page.Muito fácil
182Accessible ColorsAccessibility color toolCheca contraste e sugere ajustes.Muito fácil
183Contrast CheckerContrast toolChecagem de contraste WCAG.Muito fácil
184ColorableContrast toolTesta combinações de cores acessíveis.Muito fácil
185WhoCanUseColor accessibilityMostra acessibilidade de cores por deficiência visual.Muito fácil
186Open ColorColor systemSistema de cores aberto para UI.Fácil
187Radix ColorsColor systemEscalas de cor acessíveis para UI.Fácil
188Tailwind Color GeneratorTailwind colorsGera escalas de cor para Tailwind.Muito fácil
189Material Design PaletteMaterial colorsPaletas estilo Material Design.Muito fácil
190Open PropsCSS variablesTokens CSS prontos: cores, sombras, sizes.Fácil
191Normalize.cssCSS resetNormaliza estilos entre navegadores.Muito fácil
192Modern NormalizeCSS resetNormalize moderno e pequeno.Fácil
193CSS RemedyCSS resetReset pensando em comportamento moderno.Médio
194Sanitize.cssCSS resetBase consistente e segura para CSS.Fácil
195Reseter.cssCSS resetReset moderno para projetos web.Fácil
196Destyle.cssCSS resetRemove estilos padrões agressivamente.Médio
197The New CSS ResetCSS resetReset moderno usando unset/revert.Médio
198A11y CSS ResetAccessible resetReset CSS com foco em acessibilidade.Fácil
199CSS IconsCSS icon libraryÍcones feitos em CSS puro.Muito fácil
200IconoirIcon libraryÍcones SVG gratuitos e open-source.Muito fácil
201HeroiconsSVG iconsÍcones gratuitos da equipe Tailwind.Muito fácil
202LucideIcon libraryÍcones open-source limpos.Muito fácil
203Feather IconsSVG iconsÍcones leves e minimalistas.Muito fácil
204Tabler IconsSVG iconsGrande biblioteca de ícones gratuitos.Muito fácil
205Phosphor IconsIcon libraryÍcones flexíveis com pesos variados.Muito fácil
206Remix IconIcon libraryÍcones gratuitos para web/app.Muito fácil
207BoxiconsIcon libraryÍcones CSS/SVG fáceis de usar.Muito fácil
208Bootstrap IconsIcon libraryÍcones gratuitos do Bootstrap.Muito fácil
209Font Awesome FreeIcon libraryÍcones gratuitos; filtrar por Free.Muito fácil
210IoniconsIcon libraryÍcones open-source para web/mobile.Muito fácil
211Simple IconsBrand iconsÍcones SVG de marcas.Muito fácil
212DeviconDeveloper iconsÍcones de tecnologias/dev tools.Muito fácil
213SVG RepoSVG libraryGrande biblioteca de SVGs gratuitos.Muito fácil
214IconmonstrIcon libraryÍcones gratuitos em SVG/PNG.Muito fácil
215IconifyIcon frameworkAcesso unificado a muitas coleções de ícones.Fácil
216Line AwesomeIcon fontAlternativa line-style ao Font Awesome.Fácil
217CSS.ggPure CSS iconsÍcones em CSS puro.Muito fácil
218SVGOMGSVG optimizerOtimiza SVG para usar no site.Muito fácil
219GetIllustrations FreeIllustrationsIlustrações gratuitas; conferir licença.Fácil
220unDrawIllustrationsIlustrações SVG gratuitas customizáveis.Muito fácil
221StorysetIllustrationsIlustrações editáveis; atribuição conforme licença.Fácil
222IRA DesignIllustration kitIlustrações SVG gratuitas customizáveis.Fácil
223Open DoodlesIllustrationsDoodles gratuitos para projetos.Fácil
224ManyPixels GalleryIllustrationsGaleria gratuita de ilustrações.Fácil
225DrawKit FreeIllustrations/iconsRecursos gratuitos; verificar licença por item.Fácil
226Blush FreeIllustrationsIlustrações com opções gratuitas.Fácil
227HumaaansIllustrationsBiblioteca gratuita de humanos ilustrados.Fácil
228Open PeepsIllustrationsPersonagens ilustrados open-source.Fácil
229Shape.soIcons/illustrationsRecursos visuais com plano gratuito.Fácil
230Lordicon FreeAnimated iconsÍcones animados com filtros gratuitos.Fácil
231LottieFiles Free AnimationsLottie animationsAnimações gratuitas para UI.Fácil
232SVGator Free ToolsSVG toolsFerramentas gratuitas para SVG.Fácil
233ClippyClip-path generatorGera clip-path CSS visualmente.Muito fácil
234CSS Clip-path MakerCSS shapesGera cantos/formas CSS modernas.Fácil
235Fancy CSS BordersBorder generatorBordas decorativas em CSS.Fácil
236CSS GeneratorsCSS generatorsColeção de geradores CSS visuais.Muito fácil
237CSS Separator GeneratorSeparatorsGera separadores CSS/SVG para seções.Muito fácil
238CSS Triangle GeneratorCSS shapesGera triângulos CSS.Muito fácil
239CSS Arrow PleaseTooltip arrowsGera setas CSS para balões/tooltips.Muito fácil
240Best CSS Button GeneratorButton generatorCria botões CSS visualmente.Muito fácil
241Button Generator CSSButton generatorGerador simples de botões CSS.Muito fácil
242UI ButtonsButton snippetsBotões CSS prontos para copiar.Muito fácil
243Markodenic CSS TipsCSS snippetsDicas e snippets práticos.Fácil
244CSS Layout PatternsLayout patternsPadrões de layout modernos.Fácil
245A11y Project ChecklistAccessibilityChecklist para não criar site bonito e inacessível.Fácil
246Inclusive ComponentsAccessible componentsPadrões de componentes acessíveis.Médio
247Accessible UI Components ListAccessibility patternsArtigos práticos sobre componentes acessíveis.Médio
248ARIA Authoring PracticesAccessible patternsPadrões oficiais para componentes interativos.Médio
249Formspark UI ResourcesForms CSSInspiração para formulários CSS.Fácil
250FormBold Free TemplatesForm templatesTemplates gratuitos de formulários.Fácil

Did this resonate?

Related documents