Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create an overlay effect with CSS?

CSS Web Development Front End Technology

The overlay effect is a useful web design technique that displays content on top of the main page content. It creates a modal-like experience where a semi-transparent layer covers the entire page, often used for popups, image galleries, or forms.

Syntax

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

Key CSS Properties

Property Purpose
position: fixed Positions overlay relative to viewport
z-index Places overlay above other elements
display: none/block Controls visibility of overlay
rgba() Creates semi-transparent background

Example: Basic Overlay Effect

The following example creates a complete overlay with a close button −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
    }
    
    .showBtn {
        background: #007bff;
        border: none;
        color: white;
        padding: 12px 20px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 4px;
    }
    
    .showBtn:hover {
        background: #0056b3;
    }
    
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 999;
        display: none;
        align-items: center;
        justify-content: center;
    }
    
    .overlay-content {
        background: white;
        padding: 30px;
        border-radius: 8px;
        position: relative;
        max-width: 400px;
        text-align: center;
    }
    
    .closeBtn {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 28px;
        cursor: pointer;
        color: #666;
        background: none;
        border: none;
    }
    
    .closeBtn:hover {
        color: #000;
    }
</style>
</head>
<body>
    <h1>Overlay Effect Demo</h1>
    <p>Click the button below to show the overlay effect.</p>
    <button class="showBtn">Show Overlay</button>
    
    <div class="overlay">
        <div class="overlay-content">
            <button class="closeBtn">×</button>
            <h2>Overlay Content</h2>
            <p>This is the overlay content. Click the × to close.</p>
        </div>
    </div>
    
    <script>
        const showBtn = document.querySelector('.showBtn');
        const overlay = document.querySelector('.overlay');
        const closeBtn = document.querySelector('.closeBtn');
        
        showBtn.addEventListener('click', () => {
            overlay.style.display = 'flex';
        });
        
        closeBtn.addEventListener('click', () => {
            overlay.style.display = 'none';
        });
        
        // Close overlay when clicking outside content
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                overlay.style.display = 'none';
            }
        });
    </script>
</body>
</html>

A blue "Show Overlay" button appears. When clicked, a dark semi-transparent overlay covers the entire page with a white content box in the center containing text and a close (×) button. The overlay can be closed by clicking the × or clicking outside the content area.

Key Points

  • Use position: fixed to cover the entire viewport
  • Set z-index high enough to appear above other elements
  • Use rgba() for semi-transparent backgrounds
  • Include both click and outside-click close functionality
  • Center content using flexbox for better responsiveness

Conclusion

CSS overlay effects provide an elegant way to display modal content. The key is using fixed positioning, proper z-indexing, and JavaScript to control visibility for a smooth user experience.

Updated on: 2026-03-15T14:50:15+05:30

436 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements