» Gradient + Shadow On Anything

Easily add a linear gradient or shadow on any element - and best of all, it's cross-browser compatible (yes, it even works with Internet Explorer 6). How cool is that?

It's so simple, just enter the CSS selector for your element. Choose your colours. Choose your dropshadow settings and you're done. You can even apply a gradient to the "body" (the entire page) which looks very cool.

Did I mention it works with IE6? :-) Enough said.

Download from the Concrete5 Marketplace ($15)


  • Add a background and/or dropshadow to any element in seconds
  • Cross-browser support
  • Even works on Internet Explorer 6 (and newer)
  • Works with any template
  • Doesn't use images, so it's super fast loading
  • Easily add dropshadows without images
  • Control dropshadow placement, colour and blur
  • Apply effects to multiple elements on the page from 1 block


Don't worry, you don't have to be web design guru to use this add-on. A "CSS selector" means each element on your site usually has a "class" or "ID" so it be formatted in a specific way. I suggest using the Google Chrome web browser when building your site with Concrete5. Apart from being faster and more stable, it has some useful built-in tools. Just right-click on any element and choose "Inspect element" to find out what class/ID is used.

A "class" is selected using a dot (.) in front, and an "ID" is selected with a hash (#). Here's an example.

<div class="mycoolclass">Some example content</div>
In this case the CSS selector would be .mycoolclass

Here's another example:

<div id="anothercoolelement">Even more example content</div>

In this case the CSS selector would be #anothercoolelement

Here's a couple example screenshots of what you would see:


This is some sample content with a gradient and dropshadow applied to it.

Super cool!

Another block of content with a different gradient and no dropshadow. Very flexible.

Demonstration Video