Gradient shaded boxes are an effective way to add visual interest and depth to your website. You can call attention to important page elements with a beautiful gradient shaded box. It’s fairly easy to make gradient shaded boxes in CSS. All you need to do is adapt the following code to create a stunning gradient in the DIV box and a shadow around the outside:
.gradientBoxesWithOuterShadows {
height: 200px;
width: 400px;
padding: 20px;
background-color: white;
/* outer shadows (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
/* gradients */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
}
By following this basic example, you’ll be able to create gradient shaded boxes in CSS to highlight important page elements or simply add more visual style and depth to your overall web design. Gradient shaded boxes can be a useful way to break up the content on a web page into more digestible sections for a user.
While CSS is fairly straightforward, you’ll most likely want to work with your web designer to implement these changes to your website. Your web designer will be able to advise you on how to best implement gradient shaded boxes in CSS to maximize your site’s readability and usability.
How do you currently implement gradient shaded boxes on your website?
