How to create a floating, centered and tranparent DIV using only CSS

Last Updated: 07th June 2026

This is a floating notification window created entirely with pure CSS. It features a transparent design and appears centered on the screen when displayed.

Click the button to open a floating DIV element.

Forgot password?

This is a transparent, floating and centered DIV.

Enter your email address:

Go back to the Tutorial
More interesting and interactive Demos

2. How to Build a Responsive Flexbox Layout with CSS

3. CSS - How to make a DIV float to Center

How to create a floating, centered and tranparent DIV using only CSS

This is a transparent, floating and centered DIV.

📖 Read Next