CSS Sprite Generator
Combine multiple images into a single sprite sheet with auto-generated CSS. Upload icons, configure layout, and download optimized sprites for faster page loads.
Quick Presets
Sprite Sheet Preview
Upload images to see preview
Generated CSS
/* Upload images to generate CSS */When to Use This Tool
Combine social icons, UI icons, or custom icon sets into a single optimized sprite sheet.
Recommended: Web Applications
Reduce HTTP requests by loading multiple images as one sprite sheet, improving page speed.
Recommended: Production Sites
Generate @2x sprite sheets with automatic CSS media queries for high-DPI screens.
Recommended: Modern Web
Create sprite sheets for 2D games, animations, and interactive elements.
Recommended: HTML5 Games
Optimize images for email clients by using sprite sheets with absolute positioning.
Recommended: Email Design
Sprite sheets work across all browsers, including older versions that don't support newer image formats.
Recommended: Wide Compatibility
How It Works
Choose a preset configuration (Social Icons, UI Small/Medium, Large Icons, or Retina)
Upload multiple images using the file picker or drag-and-drop
Adjust icon dimensions, spacing between icons, and grid columns in Settings
Enable Retina support (2x) for high-DPI displays if needed
Preview the generated sprite sheet in real-time
Choose CSS format: Classes (individual .sprite-N classes) or CSS Variables (custom properties)
Download the sprite sheet PNG and CSS file
Use the generated CSS classes or variables in your HTML
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
What are CSS sprites and why use them?
CSS sprites combine multiple images into one file, reducing HTTP requests and improving page load speed. Instead of loading 20 separate icon files, you load one sprite sheet and use CSS background-position to display each icon. This is especially beneficial for icons, buttons, and small UI elements.
How do I use the generated CSS classes?
Add the base sprite class and specific icon class to your HTML: <span class="sprite sprite-0"></span>. The base .sprite class loads the image, while .sprite-0, .sprite-1, etc. position each icon. Update the background-image URL to point to your uploaded sprite sheet.
What's the difference between Classes and CSS Variables output?
Classes output generates individual .sprite-N classes with fixed background-position values. CSS Variables output creates custom properties (--sprite-0-x, --sprite-0-y) that you can use dynamically with var(). CSS Variables are more flexible for JavaScript manipulation and theming.
How does Retina (2x) support work?
Enabling 2x creates a sprite sheet at double resolution with background-size to scale it down. A media query detects high-DPI screens and swaps to the @2x sprite. This ensures crisp icons on Retina displays while using the standard sprite on normal screens.
What's the optimal sprite sheet size?
Keep sprite sheets under 200KB for best performance. Large sprites (>500KB) defeat the purpose of optimization. If you have many icons, consider creating multiple sprite sheets grouped by category or page. Also, use PNG-8 for simple icons and PNG-24 for icons with transparency.
Can I update individual icons later?
Not easily - sprite sheets are static. If you need to update an icon, you'll need to regenerate the entire sprite sheet. For frequently changing icons, consider using individual files or SVG sprites. CSS sprites work best for stable icon sets that don't change often.
How do I handle different icon sizes in one sprite?
This tool assumes uniform icon sizes for grid-based layout. For varied sizes, you'll need to manually create the sprite sheet and write custom CSS with different width/height and background-position values for each icon. Uniform sizes are recommended for easier maintenance.
Are sprites still relevant with HTTP/2?
HTTP/2's multiplexing reduces the benefit of sprites, but they're still useful for: reducing browser connection limits, decreasing file overhead (headers, metadata), ensuring atomic loading (all icons load together), and supporting older browsers. Modern alternatives include SVG sprites and icon fonts.