My CSS Style Guide/Techniques (Main/Pro Website Background Effects): Benjamin-Newton Overview

Important Notice

I have a new domain set up called Cloudy.diamonds - Clarity in a Confusing World

I have officially dropped benjamin-newton.info, benjamin-newton.net, benjamin-newton.org, and benjamin-newton.us and they will no longer be mine nor redirect to any of my websites. I am making things simpler and cheaper for me and less confusing for when I deal with technical people. These will eventually be bought up by entirely different people and be used for any purpose like just for ads.

benjamin-newton.com, on the other hand, will remain mine for the forseeable future.

All of these techniques are purely HTML and CSS only. You can use these techniques freely, as long as you don't copy my general site designs. I got most of them or parts of them from other places as well.

Desert Sand Dunes

I thought up this all by myself



#header-top, #bottom {

background: #bfaa8b;

background: 

linear-gradient(to bottom, #bfaa8b 0%,#edd69e 10%,#b59b75 20%,#edd69e 30%,#b59b75 40%,#edd69e 50%,#bfaa8b 60%,#edd69e 70%,#bfaa8b 80%,#edd69e 90%,#bfaa8b 100%);

}


Tan Curtain

I thought up this all by myself



body {

background-color: #bfaa8b;

background-image: 

linear-gradient(to right, #bfaa8b 0%,#edd69e 10%,#b59b75 20%,#edd69e 30%,#b59b75 40%,#edd69e 50%,#bfaa8b 60%,#edd69e 70%,#bfaa8b 80%,#edd69e 90%,#bfaa8b 100%);                    

}
    

Wood Panels Texture

I thought up this all by myself



body {

background: #bfaa8b;
    
background-image: 

linear-gradient(to right, #bfaa8b 0%,#edd69e 10%,#b59b75 20%,#edd69e 30%,#b59b75 40%,#edd69e 50%,#bfaa8b 60%,#edd69e 70%,#bfaa8b 80%,#edd69e 90%,#bfaa8b 100%),
linear-gradient(to right, #bfaa8b 0%,#edd69e 10%,#b59b75 20%,#edd69e 30%,#b59b75 40%,#edd69e 50%,#bfaa8b 60%,#edd69e 70%,#bfaa8b 80%,#edd69e 90%,#bfaa8b 100%);

background-repeat: repeat-x, repeat-x;
background-position: left top, left bottom;
    
background-size: auto 245px, auto 384px;  
          
}


Red and Gold Stripes: Curtains or Rolls of Fabric

I thought up this all by myself



body { 

background: 

linear-gradient(135deg, rgba(191,178,0,0.5) 0%,rgba(120,108,0,1) 4%,rgba(102,90,0,0.88) 5%,rgba(194,46,0,0.5) 8%,rgba(255,16,0,0.75) 10%,rgba(203,10,0,1) 12%,rgba(124,0,0,0.63) 15%,rgba(137,36,0,0.5) 16%,rgba(191,178,0,1) 20%,rgba(120,108,0,0.5) 24%,rgba(102,90,0,0.63) 25%,rgba(194,46,0,1) 28%,rgba(255,16,0,0.75) 30%,rgba(203,10,0,0.5) 32%,rgba(124,0,0,0.88) 35%,rgba(137,36,0,1) 36%,rgba(191,178,0,0.5) 40%,rgba(120,108,0,1) 44%,rgba(102,90,0,0.88) 45%,rgba(194,46,0,0.5) 48%,rgba(255,16,0,0.75) 50%,rgba(203,10,0,1) 52%,rgba(124,0,0,0.63) 55%,rgba(137,36,0,0.5) 56%,rgba(191,178,0,1) 60%,rgba(120,108,0,0.5) 64%,rgba(102,90,0,0.63) 65%,rgba(194,46,0,1) 68%,rgba(255,16,0,0.75) 70%,rgba(203,10,0,0.5) 72%,rgba(124,0,0,0.88) 75%,rgba(137,36,0,1) 76%,rgba(191,178,0,0.5) 80%,rgba(120,108,0,1) 84%,rgba(102,90,0,0.88) 85%,rgba(194,46,0,0.5) 88%,rgba(255,16,0,0.75) 90%,rgba(203,10,0,1) 92%,rgba(124,0,0,0.63) 95%,rgba(150,3,0,0.5) 96%,rgba(255,16,0,1) 100%);

}


Red and Gold Stripes: Plastic

I thought up this all by myself



ul, ol {
background-color: transparent;
background-image: linear-gradient(45deg, rgba(255,255,255,0.75) 0%,rgba(191,178,0,0.75) 4%,rgba(255,255,255,0.75) 8%,rgba(191,178,0,0.75) 12%,rgba(255,16,0,0.75) 16%,rgba(255,255,255,0.75) 20%,rgba(255,16,0,0.75) 24%,rgba(191,178,0,0.75) 28%,rgba(255,255,255,0.75) 32%,rgba(207,197,64,0.75) 35%,rgba(191,178,0,0.75) 36%,rgba(255,16,0,0.75) 40%,rgba(255,255,255,0.75) 44%,rgba(255,16,0,0.75) 48%,rgba(191,178,0,0.75) 52%,rgba(255,255,255,0.75) 56%,rgba(191,178,0,0.75) 60%,rgba(255,16,0,0.75) 64%,rgba(255,76,64,0.75) 65%,rgba(255,255,255,0.75) 68%,rgba(255,16,0,0.75) 72%,rgba(191,178,0,0.75) 76%,rgba(255,255,255,0.75) 80%,rgba(191,178,0,0.75) 84%,rgba(255,16,0,0.75) 88%,rgba(255,255,255,0.75) 92%,rgba(255,16,0,0.75) 96%,rgba(255,255,255,0.75) 100%);
}


3 Brightly Colored "Stack" of Blocks

I cam up with this all by myself



#background {

background-color: rgb(255,178,0);

background-image: linear-gradient(135deg, rgba(255,178,0,1) 0%,rgba(255,178,0,1) 10%,rgba(255,0,0,1) 20%,rgba(0,140,255,1) 20%,rgba(0,140,255,1) 30%,rgba(255,178,0,1) 30%,rgba(255,178,0,1) 40%,rgba(255,0,0,1) 50%,rgba(0,140,255,1) 50%,rgba(0,140,255,1) 60%,rgba(255,178,0,1) 60%,rgba(255,178,0,1) 70%,rgba(255,0,0,1) 80%,rgba(0,140,255,1) 80%,rgba(0,140,255,1) 91%,rgba(255,178,0,1) 91%,rgba(255,178,0,1) 100%);

}


3 Brightly Colored "Stack" of Blocks: Light Color

I cam up with this all by myself



p { 
background-color: rgb(255,244,224);

background-image: linear-gradient(30deg, #e2f2ff 1%,#fff4e0 20%,#ffdddd 40%,#e2f2ff 60%,#fff4e0 80%,#ffdddd 100%);
}

text-shadow: white 1px 1px 1px;
color: black;
}


3 Brightly Colored "Stack" of Blocks: Dark Color

I cam up with this all by myself



h1, h2, h3, h4 {

background: rgb(35,17,0);

background: linear-gradient(135deg, rgba(35,17,0,1) 0%,rgba(61,42,0,1) 10%,rgba(38,0,0,1) 20%,rgba(0,12,25,1) 20%,rgba(0,12,25,1) 30%,rgba(61,42,0,1) 30%,rgba(61,42,0,1) 40%,rgba(38,0,0,1) 50%,rgba(0,12,25,1) 50%,rgba(0,12,25,1) 60%,rgba(61,42,0,1) 60%,rgba(61,42,0,1) 70%,rgba(38,0,0,1) 80%,rgba(0,12,25,1) 80%,rgba(0,12,25,1) 90%,rgba(61,42,0,1) 90%,rgba(61,42,0,1) 100%);

text-shadow: black 1px 1px 1px;
color: white;

}


Polished Bronze/Gold

I cam up with this all by myself



background: rgb(183,179,128);

background: radial-gradient(ellipse at center, rgba(183,179,128,1) 19%,rgba(219,215,168,1) 65%,rgba(196,191,123,1) 89%);
padding: 1em;
margin: 1em;
text-align: left;
color: black;
background-color: rgb(219,219,219);
border-radius: 1em;
border-width: 2px;
border-style: solid;
border-color: black;
}

Smoothened Swede Leather with Chiseled Letters

I cam up with this all by myself



h1, h2, h3, h4, h5, h6 {

background: linear-gradient(135deg, #edd69e 0%,#bfaa8b 50%,#edd69e 100%);
text-shadow: rgb(237,214,158) 1px 1px 1px;

}


Engraved Polished Aluminum

I cam up with this all by myself



p {

background: linear-gradient(30deg, #ededed 0%,#dbdbdb 20%,#ededed 40%,#dbdbdb 60%,#ededed 80%,#dbdbdb 99%);
text-shadow: white 1px 1px 1px;

}


Pastel Rainbow Smoke

I cam up with this all by myself



p {

background: linear-gradient(30deg, #e2f2ff 1%,#fff4e0 20%,#ffdddd 40%,#e2f2ff 60%,#fff4e0 80%,#ffdddd 100%);
text-shadow: white 1px 1px 1px;

}


Benjamin-Newton.com by Ben Huot

All Material Copyright 1998-Present unless otherwise stated.

Jump to Top

For Automated Software Visitors

XML Sitemap