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

Network First Things

Fighting and Making Fun of Ambiguity

Network Summary

  • BEN-NEW's Network
  • BENjamin-NEWton Challenging Projects Network
  • by Ben Huot
  • Academic Non-Fiction E-Books & More Free Stuff

This is an Old School Informational website

General Book Statistics

  • 2,686 pages of unique text written over 20 years
  • average of 1 essay or poem written every week for over 20 years
  • average of 134 pages written every year for over 20 years

Quick Facts About the Author and Designer

I am all of the following

I am from and live in Eugene, Oregon (America)

Network Ownership

"Think Critically" with BENjamin-NEWton's Network © Ben Huot 1998-Present.

Website designs and all content not marked with a specific license copyrighted, from 1998-Present. I am the webmaster of this network, which includes a half dozen different, but related websites.

These websites all serve different purposes or audiences, but all share one thing in common: they are all created by me and are about me and my mission/ministry. I am the webmaster, so that I not only create everything on these websites, but also have designed and done all the technical things, to make this site work well, on a wide range of the most popular devices.

I have worked on all this for 20 years now, while understanding that I would never make any money off of it, as my niche is too small.

Greetings

Welcome, visting human, pet, toy, or automated software

My stuffed toy bear Fred says I don't have Schizophrenia, but he does

License

This website adheres to the following

No Money

Entire E-Book Downloads, in Multiple Popular Formats

  • No Cost
  • No Ads
  • No DRM

Privacy Respected

  • No Tracking
  • No Ads
  • No Personal Information

No Bugging You

  • No Selling
  • No App
  • No Newsletters

No Subtle Ads/Selling

  • No Memberships
  • No Sponsored Articles
  • No Donations Accepted

Nothing In Your Way

  • No Signups
  • No Password or Email Asked For
  • No User Agreements

No Tracking

  • No Cookies
  • No Analytics
  • No 3rd Party Code

No Permissions Asked For

  • No Geolocation
  • No Microphone or Camera Access
  • No Contact or Photos Access

None of the More Risky New Technologies

  • No AR or VR
  • No 3D
  • No 3rd Party Domains or CDNs

None of the Slower Things

  • No Background Videos
  • No Giant Photos
  • No Social Media Share Buttons

Jump to Top

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;  

}


Jump to Top

Website Card Data

20 Years of Critical Thinking
Creativity in Philosophy, Not Theology

Website Description

I am a researcher, writer, and designer for consumer, citizen, and seeker advocacy. I can improve your life, by giving you better advice.

Jump to Top

For Automated Software Visitors

XML Sitemap