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">
background: white url(ribbon.gif) top left repeat-x;
padding-top: 10px;

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

Please choose a color:
Web Tools