Frontend Sidebars CSS Boxes w/ curved edges & gradient backgrounds


Hi folks!  Thanks for all the help your posts have been giving me.  I figured out how to create some nice boxes in CSS with curved corners, colored borders, and a gradient background and here's the code!

/*right sidebar boxes gradient background*/
#sidebar .sidebar-party-members, .sidebar-last-updated, #sidebar .sidebar-quick-stats,
#sidebar fan-counter-container, #sidebar .stream-module-container, #sidebar .sidebar-table-of-contents,
#sidebar .adventure-log-index-filter{
background-image: linear-gradient(to bottom, #181818 , #002A50);
width: 226px;
border: 3px solid #489ebe;
padding: 10px;
margin: 20px;
border-radius: 10px;

/*left sidebar boxes gradient background*/
.campaign-public-layout #campaign-nav {background-image: linear-gradient(to bottom, #181818 , #002A50); border: 3px solid #489ebe; border-radius: 10px;}

If you put this into your custom css box on your advanced tab you'll see that the #489ebe is a robin's egg blue color and the #181818 is a dark gray almost black which is the top color fading down into #002A50 at the bottom which is a dark hue of blue that white text looks pretty nice on.  I used these with the "Metal Grunge" style to a nice effect.

Hope you guys find this helpful.  



Sign In or Register to comment.

September 2023

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!