Ribbon Rules Generator Beta

A lot of Web 2.0 designs these days sport alternating colored horizontal rules, used as either section dividers or element borders. Use this tool to easily generate your own "Ribbon Rules" using random shades of a single color, or explicit colors of your choice!

Random shades

Hex values (e.g. "FFAA66") or use picker
• Base color:  

User selected colors

Hex values (e.g. "#FFAA66") or use picker
• Color 1:  
• Color 2:  
• Color 3:  
• Color 4:  
• Color 5:  

Random widths

Enter pixel range (<50) in pixels:
• Max width:
• Min width:

User selected width

Enter width (<50) in pixels:
• Set width:

Sample Ribbon Rules CSS

Below is a sample CSS that runs your ribbon across the top of the page (see top of this page):

<style type="text/css">
body{
background: white url(ribbon.gif) top left repeat-x;
padding-top: 10px;
}
</style>

There are countless other ways to utilize the ribbon of course.