0

Using only straight html and css how do I make background web page colours, and also images, appear to have a shiny/glossy look to them?

I am not talking about making a gradient going between two different colours but rather adding a glossy (or shiny) appearance to standard hex colours and to images.

Something like the glossy effect that coats of clear have on paint jobs on vehicles.

Some sort of glossy/shiny overlay?

Rounin
  • 27,134
  • 9
  • 83
  • 108
Gett'nOld
  • 11
  • 1
  • 1
    Welcome to StackOverflow! In order for us to help you better, can you please update your question so that it shows your **relevant code** in a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve); we can't resolve your problem without seeing it! ;) It would also be helpful if you could let us know what you have tried so far to solve your problem. For further information, please refer to the help article regarding [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and take the [**tour of the site**](http://stackoverflow.com/tour) :) – Obsidian Age Aug 08 '17 at 03:31
  • I don't have a problem - what I have works - it is just standard html/css body { background-color:#025e8c; font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; } I just want the page to look like a glossy magazine not a dull looking hex background colour. Beyond my question and this explaination I don't know how else to communicate my wishes? – Gett'nOld Aug 08 '17 at 03:39
  • Take a look at this question: https://stackoverflow.com/questions/5754439/how-to-make-bevel-and-embosed-effect-to-button-in-css-3-for-web-kit-based-browse The effect you're after is perhaps "bevel and emboss"? – ESR Aug 08 '17 at 04:18

3 Answers3

-1

Your going to want to use CSS do add to your colors. If you want to use glossy colors you should use a color picker that gives you multiple suggestions. https://www.w3schools.com/colors/colors_hexadecimal.asp

  • I already have hex colours picked, and the CSS is doing the colours. I was hoping for something like the glossy effect that coats of clear have on paint jobs on vehicles. Some sort of glossy/shiny overlay? Obviously not possible? – Gett'nOld Aug 08 '17 at 03:44
  • Your best bet is either finding what colors you want and taking them to Photoshop and designing your page using or other adobe products such as illustrated. Besides that there's no special code that makes it glossy that I can think of threw the languages I know. –  Aug 08 '17 at 03:47
-1

You could add multiple different shadows using box-shadow to the desired elements:

div {
  margin: 50px auto;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #025e8c;
  box-shadow: 0 0 50px gold, 0 0 150px red;
}
<div></div>

Is this the sort of thing you're looking for?

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
-1

The only thing I can think of is something like:

filter: saturate(200%);

or

filter: contrast(200%);

or... perhaps both (?)

Working Example:

div {
float: left;
}

div, div h2 {
margin: 6px;
}

.contrast img {
filter: contrast(300%);
}

.saturate img {
filter: saturate(600%);
}

.contrast img {
filter: contrast(300%);
}

.contrast-saturate img {
filter: saturate(600%) contrast(300%);
}
<div>
<h2>Standard</h2>
<img src="http://placekitten.com/120/180" title="Normal Image" alt="Kitten" />
</div>

<div class="contrast">
<h2>Contrast</h2>
<img src="http://placekitten.com/120/180" title="Image with Contrast" alt="Contrasted Kitten" />
</div>

<div class="saturate">
<h2>Saturate</h2>
<img src="http://placekitten.com/120/180" title="Image with Saturation" alt="Saturated Kitten" />
</div>

<div class="contrast-saturate">
<h2>Both</h2>
<img src="http://placekitten.com/120/180" title="Image with Both" alt="Processed Kitten" />
</div>

Further Reading:

https://developer.mozilla.org/en/docs/Web/CSS/filter

Rounin
  • 27,134
  • 9
  • 83
  • 108