How to Create an HTML Lightbox

by Robert Godard
Dynamic Graphics Group/Dynamic Graphics Group/Getty Images

Lightbox is a Web design tool that creates a small box that displays content such as images or text in it that pops up in the center of the screen when a link is clicked. There are many variations of creating a lightbox, and most of them require that some javascript be used. There is, however, a way to create a lightbox effect on your website using only HTML code.

Step 1

Open a text editor such as Notepad or TextEdit. Enter in the CSS code in the header part of your page. First type ""

Step 2

Type "

" in the body section of your website. This will define the content you want to appear in your Lightbox. Any html can be inserted here.

Step 3

Add a "Close" button your lightbox by typing "Close" within the content of your Lightbox.

Step 4

Create a link to the Lightbox by typing "Click Here" Replace "Click Here" with the text you want for your link.

Save your file. You have now created a Lightbox with just HTML.


  • Integrate your lightbox into a section of your website. They are especially good for displaying images or videos.


Photo Credits

  • Dynamic Graphics Group/Dynamic Graphics Group/Getty Images

About the Author

Robert Godard began writing in 2007 for various creative blogs and academic publications. He has been featured on multiple film blogs and has worked in the film industry. He attended Baltimore College, earning his B.A. in history.

More Articles