# Glossy Effect using only CSS (that means no images!)

**URL:** <https://forum.kirupa.com/t/glossy-effect-using-only-css-that-means-no-images/210199>\
**Category:** web dev\
**Created:** [December 16, 2006, 1:40am UTC](https://forum.kirupa.com/t/glossy-effect-using-only-css-that-means-no-images/210199 "2006-12-16T01:40:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![BadMagick](https://avatars.discourse-cdn.com/v4/letter/b/90ced4/32.png) [@BadMagick](https://forum.kirupa.com/u/BadMagick)\
**Post date:** [December 16, 2006, 1:40am UTC](https://forum.kirupa.com/t/glossy-effect-using-only-css-that-means-no-images/210199/1 "2006-12-16T01:40:22Z")

</div>

we’ve all seen it - most of us have used it…

the glossy effect.

here’s an easy way to add a glossy effect to your page banner using only CSS. (if someone has already done this, mods, just delete this post)

* * *

say you have a CSS file, with a banner div called

```auto
div#banner

```

. within that div you can place your page banner information, i.e. “my bomb-\*\*\*\*\* site”. in your CSS file, add to it another div with the following information:

```auto
div#highlight {
background-color: white;
height: 40px;
width: 100%;
z-index: 100;
opacity: .3;
position: absolute;
color: white;
}

```

place this within your body or container div tag BEFORE your banner div. the height is an arbitrary value, depending on the size of your banner. the z-index will place the div ‘above’ the banner being displayed (it’s at 100 to make sure of it). of course, you may need to add “alpha” and “moz-opacity” values to your highlight div as well.

the color for the text is the same as the background so - in case certain browsers have issues - you can place a “.” within that

```auto
<div id=highlight">.</div>

```

section like so.

* * *

* * *

example code for you to use:

```auto

<body>
<div id="container">
  <div id="highlight">.</div>
  <div id="banner">
    <h2>Johnson & Peterson & Assoc.</h2>
    Serving you since 1977
  </div>
</div>
</body>

```

CSS:

```auto

div#container {
border: 1px solid navy;
width: 80%;
margin-left: 10%;
margin-right: 10%;
}

div#banner {
color: black;
text-align: center;
border-bottom: 1px dotted navy;
background-color: #cfffc4;
}

```

you may need to tweak some - but the proof of concept is there. it worked for me. hopefully it will work for you as well as it is for me.