Gradient Shaded Boxes in CSS

Posted on in Uncategorized

Screen shot 2014-04-21 at 10.53.55 PMGradient 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?

Leave a Reply

What our clients are saying

I want to thank you for your help with our website development project. Your programming skills, attention to detail, and ability to interact directly with our client were excellent. You have provided tremendous value to my organization. With a project of this magnitude, including the use of web services to push data out to 19 sub-websites, your ability to overcome our unique challenges and coordinate with my IT team was exceptional. I appreciate your help, and I am certain that your expertise was key to the project's success. Thanks again, I look forward to working with you on our next endeavor!

~ John Forgione – Executive Vice President – SFA Marketing, Inc.

Read More