Free Resources

Colors

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

• HSL Picker - pick any color and get HSL, hex, and RGB values instantly.
• Coolors - generate color palettes with one click. Free tier has limits on saves.
• ColorHub - AI-driven palette generation with 150+ presets. Export as CSS or Tailwind.
• Color Hunt - community-driven collection of trending color palettes.
• Color Hex - thousands of user-submitted color palettes with hex, RGB, and HSL codes.
• mycolor.space - enter one color, get matching palettes and gradients automatically.

Gradients & Contrast

Generate CSS gradients and check readability.

• CSS Gradient - visual editor for linear and radial CSS gradients. Copy the code.
• Josh Comeau Gradient Generator - advanced gradients with color space interpolation for smoother results.
• WebGradients - 180 curated linear gradients with one-click CSS copy.
• Mesh Gradient Generator - generate CSS mesh gradients with multi-point color blends.
• WebAIM Contrast Checker - 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 - massive icon explorer with instant SVG copy. Covers 100+ icon sets.
• Tabler Icons - 6,000+ pixel-perfect stroke icons. MIT licensed.
• Lucide - 1,000+ clean SVG icons. Fork of Feather Icons, MIT licensed.
• Heroicons - SVG icons by the Tailwind CSS team. Click to copy. MIT licensed.
• Phosphor Icons - 1,000+ icons in 6 weights (thin, regular, bold, duotone, etc.). MIT licensed.
• CopyIcon - 285,000 icons with one-click SVG and PNG copy.
• Bootstrap Icons - 2,000+ open source SVG icons. MIT licensed.

Fonts

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

• Bunny Fonts - privacy-friendly, GDPR-compliant drop-in replacement for Google Fonts.
• Google Fonts - 1,500+ free open-source fonts with CDN hosting and CSS embeds.
• Fontsource - self-host open-source fonts via npm. Version-locked, works offline.
• Velvetyne Type Foundry - bold, expressive, experimental open-source typefaces. Great for display text.

Textures & Patterns

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

• Transparent Textures - 397 transparent overlay patterns. Pick a color, choose a pattern, copy the CSS.
• fffuel - 70+ free SVG generators for gradients, patterns, blobs, noise, and shapes.
• ambientCG - 2,000+ CC0 public domain textures. No attribution, no registration.

Animations

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

• Animate.css - 70+ ready-to-use CSS animation classes. Add a class, get an animation.
• Animista - customize easing, duration, and delay for CSS animations. Copy the code.
• LottieFiles - lightweight vector animations. Works natively in Overlabels overlays.
• loading.io/css - pure CSS loader and spinner animations. CC0, truly free.
• SVG Spinners - 24 SVG spinner animations with CSS and SMIL. MIT licensed.
• 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 - free sound effects. No attribution required. Great for alert sounds.
• Freesound - 700,000+ sounds. Filter by CC0 for no-attribution use. Requires free account.
• Sonniss GDC Bundle - massive free sound effect bundles (multiple GBs). No attribution required.

CSS Tools

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

• Box Shadow Examples - 95 beautiful box-shadow presets from Stripe, Material Design, Tailwind. Click to copy.
• Clippy - visual CSS clip-path maker. Drag points to create custom shapes.
• Neumorphism.io - generate soft, neumorphic CSS shadows with a visual editor.
• Glassmorphism Generator - create frosted-glass CSS effects with adjustable blur and opacity.