Diagonal Graph Paper Gradient | CSS-Tricks

#example-gradient {
  height: 200px;
  margin: 0 0 20px 0;
  background-color: #eaeaea;
  background-size: 20px 20px;
  background-image:
     -webkit-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     -webkit-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
  background-image:
     -moz-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     -moz-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
  background-image:
     -o-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     -o-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
  background-image:
     repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
     repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
}

Example

Based on original code from Christopher Burton. Also and example “without the dot”.

Billy Brown

# June 24, 2011

Don’t really see much in the example box. Maybe a stronger example would be more appealing.

Christopher Burton

Permalink to comment# June 24, 2011

Haha. I did update this to fix the dot issue in the corner. I also released this CSS3 Gradient Patter : http://jsfiddle.net/ChristopherBurton/eMuAC/

Example

Comments

Leave a Reply Cancel reply