How to make glossy colors in a css

Written by matthew weeks
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make glossy colors in a css
Adding a glossy effect to an HTML element is possible through the use of CSS3 styles. ( Images)

Cascading Style Sheets (CSS) allow you to apply a wide variety of visual effects to the elements in your Web page. You can assign them background colours, fix a height and width for them, alter their position relative to other elements in the page and much more. The newest iteration of the CSS language, CSS3, supports a property by which you can add a colour gradient to the background or foreground of an element, creating a glossy effect that gives it more depth than that of a simple solid colour.

Skill level:
Moderately Easy

Other People Are Reading


  1. 1

    Open the Web page containing the element to which you wish to add a glossy effect in your preferred text editor.

  2. 2

    Add the following code to the tag of the element to which you wish to add a glossy effect:

    style="background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9))); background-image:-moz-linear-gradient(top,bottom,from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9)));"

  3. 3

    Change the red, green, blue and alpha (RGBA) transparency values in RGBA operators in both the "to" and "from" elements of the gradient in both style declarations to your liking.

  4. 4

    Save and publish your Web page. Your specified element will now have a glossy shine in all Web browsers with CSS3 support.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.