My CSS Style Guide/Techniques (Overview 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.

Stripped Neck Tie: Pink and Turquoise

I got this from somewhere else but modified it



body {

background-image: -webkit-repeating-linear-gradient(45deg, #996666, #cc9999 25px, #669999 50px);
background-image: repeating-linear-gradient(45deg, #996666, #cc9999 25px, #669999 50px);

}
  

Stripped Neck Tie: Dark/Bright Red and Dark/Bright Blue


body {

background: -webkit-repeating-linear-gradient(45deg, #660000, #330000 25px, #000033 50px);
background: repeating-linear-gradient(45deg, #660000, #330000 25px, #000033 50px);
    
}

h1 {

background-color: #660000;
  
color: white;
border-color: white;
  
background: -webkit-repeating-linear-gradient(45deg, rgba(102,102,255,0.5), rgba(51,51,255,0.5) 25px, rgba(255,51,51,0.5) 50px);
background: repeating-linear-gradient(45deg, rgba(102,102,255,0.5), rgba(51,51,255,0.5) 25px, rgba(255,51,51,0.5) 50px);

}
  

Stripped Neck Tie with Shadow Backdrop

I came up with this all by myself.


 
h1, h2, h3, h4, h5, h6 
 
{
 
  background-color: transparent; 
  
  background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,0.25) 100%),
  
  linear-gradient(135deg, rgba(112,89,0,1) 0%,rgba(112,89,0,1) 10%,rgba(119,0,0,1) 10%,rgba(119,0,0,1) 20%,rgba(0,0,99,1) 20%,rgba(0,0,99,1) 30%,rgba(112,89,0,1) 30%,rgba(112,89,0,1) 40%,rgba(119,0,0,1) 40%,rgba(119,0,0,1) 50%,rgba(0,0,99,1) 50%,rgba(0,0,99,1) 60%,rgba(112,89,0,1) 60%,rgba(112,89,0,1) 70%,rgba(119,0,0,1) 70%,rgba(119,0,0,1) 80%,rgba(0,0,99,1) 80%,rgba(0,0,99,1) 90%,rgba(112,89,0,1) 90%,rgba(112,89,0,1) 100%);
  
}
  

3d Purple Tubes

I came up with this all by myself.



ul, ol 

{
  
background-color: white; 
  

background-image: linear-gradient(to bottom, rgba(104,0,48,1) 0%,rgba(104,0,48,0.5) 10%,rgba(255,255,255,1) 20%,rgba(104,0,48,0.5) 30%,rgba(104,0,48,1) 40%,rgba(104,0,48,0.5) 50%,rgba(255,255,255,1) 60%,rgba(104,0,48,0.5) 70%,rgba(104,0,48,1) 80%,rgba(104,0,48,0.5) 90%,rgba(255,255,255,1) 100%);
  
  
}

Rainbow Watercolor

I came up with this all by myself.



p 

{

background-color: #eeeeee; 

background-image: linear-gradient(45deg, rgba(221,221,221,1) 0%,rgba(224,224,224,0.25) 10%,rgba(227,227,227,0.25) 20%,rgba(230,230,230,1) 29%,rgba(237,237,237,0.25) 49%,rgba(241,241,241,1) 59%,rgba(248,248,248,0.25) 80%,rgba(252,252,252,1) 90%,rgba(255,255,255,1) 100%), 

linear-gradient(to bottom, rgba(189,114,255,1) 0%,rgba(255,206,206,1) 20%,rgba(255,206,102,1) 40%,rgba(255,248,178,1) 59%,rgba(201,249,122,1) 80%,rgba(159,201,252,1) 100%);

}


Silk Cushion Effect: Rich/Intense Black/Silver Version

I got this from somewhere else but modified colors (which was a huge amount of work)



#all {

background-image: 

radial-gradient(ellipse at center, rgba(102,102,102,0) 4%,rgba(51,51,51,0) 9%),
radial-gradient(ellipse at center, rgba(102,102,102,1) 4%,rgba(51,51,51,1) 8%,rgba(51,51,51,0) 10%),
radial-gradient(ellipse at center, rgba(102,102,102,0) 4%,rgba(51,51,51,0) 9%),
radial-gradient(ellipse at center, rgba(102,102,102,0) 4%,rgba(51,51,51,0) 9%),
radial-gradient(ellipse at center, rgba(51,51,51,1) 35%,rgba(51,51,51,0) 60%),
radial-gradient(ellipse at center, rgba(51,51,51,1) 35%,rgba(51,51,51,0) 60%),
radial-gradient(rgba(153,153,153,1), rgba(0,0,0,0)),
radial-gradient(rgba(153,153,153,1), rgba(0,0,0,0)),
linear-gradient(45deg, rgba(51,51,51,0) 49%,rgba(204,204,204,1) 50%,rgba(51,51,51,0) 70%),
linear-gradient(-45deg, rgba(51,51,51,0) 49%,rgba(204,204,204,1) 50%,rgba(51,51,51,0) 70%);
       
background-position: 0 0, 50px 50px, 50px 0, 0 50px, 50px 0, 100px 50px, 0 0, 50px 50px, 0 0, 0 0;

background-size: 100px 100px;

background-color: #000000; 

  }    

Silk Cushion Effect: Rich/Intense Red Version

I got this from somewhere else but modified colors (which was a huge amount of work)



 .nav li a {

background-image: 

radial-gradient(ellipse at center, rgba(102,0,0,0) 4%,rgba(51,0,0,0) 9%),
radial-gradient(ellipse at center, rgba(102,0,0,1) 4%,rgba(51,0,0,1) 8%,rgba(51,0,0,0) 10%),
radial-gradient(ellipse at center, rgba(102,0,0,0) 4%,rgba(51,0,0,0) 9%),
radial-gradient(ellipse at center, rgba(102,0,0,0) 4%,rgba(51,0,0,0) 9%),
radial-gradient(ellipse at center, rgba(51,0,0,1) 35%,rgba(51,0,0,0) 60%),
radial-gradient(ellipse at center, rgba(51,0,0,1) 35%,rgba(51,0,0,0) 60%),
radial-gradient(rgba(153,0,0,1), rgba(0,0,0,0)),
radial-gradient(rgba(153,0,0,1), rgba(0,0,0,0)),
linear-gradient(45deg, rgba(51,0,0,0) 49%,rgba(204,0,0,1) 50%,rgba(51,0,0,0) 70%),
linear-gradient(-45deg, rgba(51,0,0,0) 49%,rgba(204,0,0,1) 50%,rgba(51,0,0,0) 70%);

background-position: 0 0, 50px 50px, 50px 0, 0 50px, 50px 0, 100px 50px, 0 0, 50px 50px, 0 0, 0 0;

background-size: 100px 100px;

background-color: #330000; 

  }
   

Silk Cushion Effect: Rich/Intense Blue Version

I got this from somewhere else but modified colors (which was a huge amount of work)



h1, h2, h3, h4 {

background-image: 

radial-gradient(ellipse at center, rgba(0,0,102,0) 4%,rgba(0,0,51,0) 9%),
radial-gradient(ellipse at center, rgba(0,0,102,1) 4%,rgba(0,0,51,1) 8%,rgba(0,0,51,0) 10%),
radial-gradient(ellipse at center, rgba(0,0,102,0) 4%,rgba(0,0,51,0) 9%),
radial-gradient(ellipse at center, rgba(0,0,102,0) 4%,rgba(0,0,51,0) 9%),
radial-gradient(ellipse at center, rgba(0,0,51,1) 35%,rgba(0,0,51,0) 60%),
radial-gradient(ellipse at center, rgba(0,0,51,1) 35%,rgba(0,0,51,0) 60%),
radial-gradient(rgba(0,0,153,1), rgba(0,0,0,0)),
radial-gradient(rgba(0,0,153,1), rgba(0,0,0,0)),
linear-gradient(45deg, rgba(0,51,51,0) 49%,rgba(0,204,204,1) 50%,rgba(0,51,51,0) 70%),
linear-gradient(-45deg, rgba(0,51,51,0) 49%,rgba(0,204,204,1) 50%,rgba(0,51,51,0) 70%);

background-position: 0 0, 50px 50px, 50px 0, 0 50px, 50px 0, 100px 50px, 0 0, 50px 50px, 0 0, 0 0;

background-size: 100px 100px;

background-color: #000033; 

  }

Silk Cushion Effect: Rich/Intense Gold Version

I got this from somewhere else but modified colors (which was a huge amount of work)



.nav li {

background-image: 

radial-gradient(ellipse at center, rgba(102,102,51,0) 4%,rgba(51,51,0,0) 9%),
radial-gradient(ellipse at center, rgba(102,102,51,1) 4%,rgba(51,51,0,1) 8%,rgba(51,51,0,0) 10%),
radial-gradient(ellipse at center, rgba(102,102,51,0) 4%,rgba(51,51,0,0) 9%),
radial-gradient(ellipse at center, rgba(102,102,51,0) 4%,rgba(51,51,0,0) 9%),
radial-gradient(ellipse at center, rgba(51,51,0,1) 35%,rgba(51,51,0,0) 60%),
radial-gradient(ellipse at center, rgba(51,51,0,1) 35%,rgba(51,51,0,0) 60%),
radial-gradient(rgba(153,153,102,1), rgba(0,0,0,0)),
radial-gradient(rgba(153,153,102,1), rgba(0,0,0,0)),
linear-gradient(45deg, rgba(51,51,0,0) 49%,rgba(204,204,153,1) 50%,rgba(51,51,0,0) 70%),
linear-gradient(-45deg, rgba(51,51,0,0) 49%,rgba(204,204,153,1) 50%,rgba(51,51,0,0) 70%);
       
background-position: 0 0, 50px 50px, 50px 0, 0 50px, 50px 0, 100px 50px, 0 0, 50px 50px, 0 0, 0 0;

background-size: 100px 100px;

background-color: black;   
       
  }
  

Silk Cushion Effect: Bright Pink Version

I got this from somewhere else but modified colors (which was a huge amount of work)


#content, .nav li a {

background: 

radial-gradient(ellipse at center, transparent 4%,transparent 9%),
radial-gradient(ellipse at center, #cc9999 4%,#996666 8%,transparent 10%),
radial-gradient(ellipse at center, transparent 4%,transparent 9%),
radial-gradient(ellipse at center, transparent 4%,transparent 9%),
radial-gradient(ellipse at center, #996666 35%,transparent 60%),
radial-gradient(ellipse at center, #996666 35%,transparent 60%),
radial-gradient(#ff9999, transparent),
radial-gradient(#ff9999, transparent),
linear-gradient(45deg, transparent 49%,#ffcccc 50%,transparent 70%),
linear-gradient(-45deg, transparent 49%,#ffcccc 50%,transparent 70%);

background-position: 0 0, 50px 50px, 50px 0, 0 50px, 50px 0, 100px 50px, 0 0, 50px 50px, 0 0, 0 0;

background-size: 100px 100px;

background-color: white;
  
}

 

Silk Cushion Effect: Medium Turquoise Version

I got this from somewhere else but modified colors (which was a huge amount of work)



h2, h3, h4, h5, h6, ul {

background-image: 

radial-gradient(ellipse at center, transparent 4%,transparent 9%),
radial-gradient(ellipse at center, #339999 4%,#006666 8%,transparent 10%),
radial-gradient(ellipse at center, transparent 4%,transparent 9%),
radial-gradient(ellipse at center, transparent 4%,transparent 9%),
radial-gradient(ellipse at center, #006666 35%,transparent 60%),
radial-gradient(ellipse at center, #006666 35%,transparent 60%),
radial-gradient(#669999, transparent),
radial-gradient(#669999, transparent),
linear-gradient(45deg, transparent 49%,#99cccc 50%,transparent 70%),
linear-gradient(-45deg, transparent 49%,#99cccc 50%,transparent 70%);
       
background-position: 0 0, 50px 50px, 50px 0, 0 50px, 50px 0, 100px 50px, 0 0, 50px 50px, 0 0, 0 0;

background-size: 100px 100px;

background-color: white;

}


Silk Cushion Effect: Light Purple Version

I got this from somewhere else but modified colors (which was a huge amount of work)



h2, h3, h4, h5, h6, ul {

background-color: rgb(247,239,247);

background-image: 

radial-gradient(ellipse at center, rgba(247,239,247,0) 4%,rgba(242,198,242,0) 9%),
radial-gradient(ellipse at center, rgba(247,239,247,1) 4%,rgba(242,198,242,1) 8%,rgba(242,198,242,0) 10%),
radial-gradient(ellipse at center, rgba(247,239,247,0) 4%,rgba(242,198,242,0) 9%),
radial-gradient(ellipse at center, rgba(247,239,247,0) 4%,rgba(242,198,242,0) 9%),
radial-gradient(ellipse at center, rgba(242,198,242,1) 35%,rgba(242,198,242,0) 60%),
radial-gradient(ellipse at center, rgba(242,198,242,1) 35%,rgba(242,198,242,0) 60%),
radial-gradient(rgba(237,196,225,1), rgba(255,255,255,0)),
radial-gradient(rgba(237,196,225,1), rgba(255,255,255,0)),
linear-gradient(45deg, rgba(242,198,242,0) 49%,rgba(242,220,242,1) 50%,rgba(242,198,242,0) 70%),
linear-gradient(-45deg, rgba(242,198,242,0) 49%,rgba(242,220,242,1) 50%,rgba(242,198,242,0) 70%);

background-position: 0 0, 50px 50px, 50px 0, 0 50px, 50px 0, 100px 50px, 0 0, 50px 50px, 0 0, 0 0;

background-size: 100px 100px;

}

Silk Cushion Effect: Light Yellow Version

I got this from somewhere else but modified colors (which was a huge amount of work)



#content, .nav li a {

background-color: rgb(255,255,237);

background-image: 

radial-gradient(ellipse at center, rgba(255,255,237,0) 4%,rgba(255,255,183,0) 9%),
radial-gradient(ellipse at center, rgba(255,255,237,1) 4%,rgba(255,255,183,1) 8%,rgba(255,255,183,0) 10%),
radial-gradient(ellipse at center, rgba(255,255,237,0) 4%,rgba(255,255,183,0) 9%),
radial-gradient(ellipse at center, rgba(255,255,237,0) 4%,rgba(255,255,183,0) 9%),
radial-gradient(ellipse at center, rgba(255,255,183,1) 35%,rgba(255,255,183,0) 60%),
radial-gradient(ellipse at center, rgba(255,255,183,1) 35%,rgba(255,255,183,0) 60%),
radial-gradient(rgba(255,255,196,1), rgba(255,255,255,0)),
radial-gradient(rgba(255,255,196,1), rgba(255,255,255,0)),
linear-gradient(45deg, rgba(255,255,183,0) 49%,rgba(255,255,219,1) 50%,rgba(255,255,183,0) 70%),
linear-gradient(-45deg, rgba(255,255,183,0) 49%,rgba(255,255,219,1) 50%,rgba(255,255,183,0) 70%);
       
background-position: 0 0, 50px 50px, 50px 0, 0 50px, 50px 0, 100px 50px, 0 0, 50px 50px, 0 0, 0 0;

background-size: 100px 100px;

}


Silk Cushion Effect: Light Blue Version

I got this from somewhere else but modified colors (which was a huge amount of work)



#header, #footer, .custom-nav, .nav li {
 
background-color: rgb(203,228,244);
       
background-image: 

radial-gradient(ellipse at center, rgba(242,248,252,0) 4%,rgba(203,228,244,0) 9%),
radial-gradient(ellipse at center, rgba(242,248,252,1) 4%,rgba(203,228,244,1) 8%,rgba(203,228,244,0) 10%),
radial-gradient(ellipse at center, rgba(242,248,252,0) 4%,rgba(203,228,244,0) 9%),
radial-gradient(ellipse at center, rgba(242,248,252,0) 4%,rgba(203,228,244,0) 9%),
radial-gradient(ellipse at center, rgba(203,228,244,1) 35%,rgba(203,228,244,0) 60%),
radial-gradient(ellipse at center, rgba(203,228,244,1) 35%,rgba(203,228,244,0) 60%),
radial-gradient(rgba(222,237,247,1), rgba(255,255,255,0)),
radial-gradient(rgba(222,237,247,1), rgba(255,255,255,0)),
linear-gradient(45deg, rgba(203,228,244,0) 49%,rgba(237,244,249,1) 50%,rgba(203,228,244,0) 70%),
linear-gradient(-45deg, rgba(203,228,244,0) 49%,rgba(237,244,249,1) 50%,rgba(203,228,244,0) 70%);

background-position: 0 0, 50px 50px, 50px 0, 0 50px, 50px 0, 100px 50px, 0 0, 50px 50px, 0 0, 0 0;

background-size: 100px 100px;

}


Yellow, Purple/Pink, and Blue Pastel Smoke

I got this from somewhere else but modified colors (which was a huge amount of work)



#header h2, #header h3, #header h4, #header h5, #header h6, #header ul,
#footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer ul

{

background: #ffd6f4;
background: linear-gradient(to bottom, #ffd6f4 0%,#dbd6ff 100%);
color: black;
text-shadow: 1px 1px 1px white;  

}
  
h1, #header li, #footer li {

background: #fff4c9;
background: linear-gradient(to bottom, #fff4c9 0%,#dbe2b7 100%);
color: black;
text-shadow: 1px 1px 1px white;  

}
  
#footer, #header {

background: #ccffeb;
background: linear-gradient(45deg, #ccffeb 0%,#cdccff 100%);
color: black;
text-shadow: 1px 1px 1px white;  

}


Benjamin-Newton.com by Ben Huot

All Material Copyright 1998-Present unless otherwise stated.

Jump to Top

For Automated Software Visitors

XML Sitemap