1. Choose overlay type: Solid color, Gradient, or Glassmorphism
2. Adjust colors, opacity, and advanced parameters
3. See real-time preview of the overlay effect
4. Copy the generated CSS or complete HTML+CSS with one click
Solid Overlay is best for dimming images or creating text backgrounds. Gradient Overlay creates smooth transitions from dark to light, ideal for banners and cards. Glassmorphism (backdrop-filter) is a modern design trend perfect for modals, navigation bars, and cards that need an elegant translucent blur effect.
backdrop-filter is well-supported in modern browsers: Chrome 76+, Edge 79+, Firefox 103+, Safari 13+. For browsers that don't support it, provide a solid or gradient overlay fallback. The generated code includes basic fallback options.
Blend modes control how the overlay color interacts with the content behind it. Overlay boosts contrast, Multiply darkens, Screen brightens. Different blend modes create unique visual effects β experiment to find the perfect look for your design.