Skip to content

Instantly share code, notes, and snippets.

@debloper

debloper/index.html

Created July 10, 2011 14:46
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save debloper/1074590 to your computer and use it in GitHub Desktop.
Save debloper/1074590 to your computer and use it in GitHub Desktop.
Download ZIP
Complex Stripes with Repeating CSS Gradients - misses a soft color-blending!
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>CSS Repeating Gradients</title>
</head>
<body>
<section></section>
</body>
</html>
Raw
style.css
body section {
width: 100%;
height: 160px;
position: fixed;
background: -moz-repeating-linear-gradient(left, rgba(255,0,0,0.8), rgba(255,0,0,0.8) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 50px),
-moz-repeating-linear-gradient(left, rgba(192,0,0,0.5), rgba(192,0,0,0.5) 2px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 27px),
-moz-repeating-linear-gradient(left, rgba(192,64,0,0.5), rgba(192,64,0,0.5) 5px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 35px),
-moz-repeating-linear-gradient(left, rgba(160,32,0,0.7), rgba(160,32,0,0.7) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 7px),
-moz-repeating-linear-gradient(left, rgba(160,0,0,0.8), rgba(160,0,0,0.8) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 5px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment