📖 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!