📖 Step 3: Design - UI Components & Patterns#79 / 291
Overlay
Overlay
📖One-line summary
A translucent layer that covers the screen.
✨Example
Click the image to show the overlay
🖼️
⚡Vibe coding prompt examples
>_
Build a translucent black overlay behind the modal. Close the modal on overlay click, and add a fade-in animation when opening.
>_
Apply a gradient overlay over an image. Have a black gradient rise from the bottom so I can place white text over it.
>_
Build a full-screen overlay loading screen. Show a spinner in the center over a translucent background with a 'Processing...' message.
Try these prompts in your AI coding assistant!