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