CSS Ribbon Generator

This generator will assist you in creating a pure CSS corner ribbon. CSS ribbons can be used when you want to display something important or eye catching to the user, such as, if you would like to show something is popular or new to your website. With this generator you can select colors and change the ribbon position to either the left or right hand side of the container, or if that's a bit difficult, just select a preset :)

Ribbon Properties
Text
Start Color
End Color
Position:
Presets:
Ribbon Preview
Popular
HTML Code
<div class="box">
   <div class="ribbon"><span>Popular</span></div>
</div>
CSS Code