---
title: Free Resources
section: Building overlays
description: Free tools and resources for building beautiful Twitch overlays. Colors, gradients, icons, fonts, textures, animations, sounds, and CSS tools - all free to use.
heading: Free Resources
lead: Tools we love for building overlays. All free, no credit(card) required unless noted.
canonical: https://overlabels.com/help/resources
---

## Colors

Pick colors, generate palettes, and find the right look for your overlays.

- [HSL Picker](https://www.hslpicker.com) - pick any color and get HSL, hex, and RGB values instantly.
- [Coolors](https://coolors.co/generate) - generate color palettes with one click. Free tier has limits
  on saves.
- [ColorHub](https://www.colorhub.app/browse) - AI-driven palette generation with 150+ presets. Export as
  CSS or Tailwind.
- [Color Hunt](https://colorhunt.co/) - community-driven collection of trending color palettes.
- [Color Hex](https://www.color-hex.com/color-palettes/) - thousands of user-submitted color palettes
  with hex, RGB, and HSL codes.
- [mycolor.space](https://mycolor.space/) - enter one color, get matching palettes and gradients
  automatically.

## Gradients & Contrast

Generate CSS gradients and check readability.

- [CSS Gradient](https://cssgradient.io) - visual editor for linear and radial CSS gradients. Copy the
  code.
- [Josh Comeau Gradient Generator](https://www.joshwcomeau.com/gradient-generator/) - advanced gradients
  with color space interpolation for smoother results.
- [WebGradients](https://webgradients.com) - 180 curated linear gradients with one-click CSS copy.
- [Mesh Gradient Generator](https://csshero.org/mesher/) - generate CSS mesh gradients with multi-point
  color blends.
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - check if your text is
  readable against your background. WCAG AA/AAA.

## Icons (1-click SVG copy)

Browse thousands of icons and copy the SVG straight into your overlay.

- [Icones](https://icones.js.org/) - massive icon explorer with instant SVG copy. Covers 100+ icon sets.
- [Tabler Icons](https://tabler.io/icons) - 6,000+ pixel-perfect stroke icons. MIT licensed.
- [Lucide](https://lucide.dev) - 1,000+ clean SVG icons. Fork of Feather Icons, MIT licensed.
- [Heroicons](https://heroicons.com) - SVG icons by the Tailwind CSS team. Click to copy. MIT licensed.
- [Phosphor Icons](https://phosphoricons.com) - 1,000+ icons in 6 weights (thin, regular, bold, duotone,
  etc.). MIT licensed.
- [CopyIcon](https://copyicon.com/) - 285,000 icons with one-click SVG and PNG copy.
- [Bootstrap Icons](https://icons.getbootstrap.com) - 2,000+ open source SVG icons. MIT licensed.

## Fonts

Free font libraries you can use in your overlays via CSS imports.

- [Bunny Fonts](https://fonts.bunny.net/) - privacy-friendly, GDPR-compliant drop-in replacement for
  Google Fonts.
- [Google Fonts](https://fonts.google.com/) - 1,500+ free open-source fonts with CDN hosting and CSS
  embeds.
- [Fontsource](https://fontsource.org) - self-host open-source fonts via npm. Version-locked, works
  offline.
- [Velvetyne Type Foundry](https://velvetyne.fr) - bold, expressive, experimental open-source typefaces.
  Great for display text.

## Textures & Patterns

Backgrounds, seamless patterns, and SVG generators for overlay flair.

- [Transparent Textures](https://www.transparenttextures.com) - 397 transparent overlay patterns. Pick a
  color, choose a pattern, copy the CSS.
- [fffuel](https://www.fffuel.co) - 70+ free SVG generators for gradients, patterns, blobs, noise, and
  shapes.
- [ambientCG](https://ambientcg.com) - 2,000+ CC0 public domain textures. No attribution, no
  registration.

## Animations

CSS animations, Lottie files, loaders, and animated backgrounds for your overlays.

- [Animate.css](https://animate.style) - 70+ ready-to-use CSS animation classes. Add a class, get an
  animation.
- [Animista](https://animista.net) - customize easing, duration, and delay for CSS animations. Copy the
  code.
- [LottieFiles](https://lottiefiles.com) - lightweight vector animations. Works natively in Overlabels
  overlays.
- [loading.io/css](https://loading.io/css/) - pure CSS loader and spinner animations. CC0, truly free.
- [SVG Spinners](https://github.com/n3r4zzurr0/svg-spinners) - 24 SVG spinner animations with CSS and
  SMIL. MIT licensed.
- [Animated Backgrounds](https://freefrontend.com/css-animated-backgrounds/) - 47 CSS animated background
  effects with copyable code.

## Sounds

Free sound effects for alert overlays. No attribution required unless noted.

- [Pixabay Sound Effects](https://pixabay.com/sound-effects/) - free sound effects. No attribution
  required. Great for alert sounds.
- [Freesound](https://freesound.org) - 700,000+ sounds. Filter by CC0 for no-attribution use. Requires
  free account.
- [Sonniss GDC Bundle](https://gdc.sonniss.com) - massive free sound effect bundles (multiple GBs). No
  attribution required.

## CSS Tools

Visual generators for shadows, shapes, glass effects, and more.

- [Box Shadow Examples](https://getcssscan.com/css-box-shadow-examples) - 95 beautiful box-shadow presets
  from Stripe, Material Design, Tailwind. Click to copy.
- [Clippy](https://bennettfeely.com/clippy/) - visual CSS clip-path maker. Drag points to create custom
  shapes.
- [Neumorphism.io](https://neumorphism.io) - generate soft, neumorphic CSS shadows with a visual editor.
- [Glassmorphism Generator](https://hype4.academy/tools/glassmorphism-generator) - create frosted-glass
  CSS effects with adjustable blur and opacity.

> [!NOTE]
> Know a great free resource that should be on this list? Let us know at
> [jasper@emailjasper.com](mailto:jasper@emailjasper.com).