3D Ribbon Generator

A generator for beautiful 3D ribbons with pure CSS.

You can start with the examples and modify the values or just start right away. Input fields also can be left empty.

Click to use them!

Elements

Add parent selector (i.e. "#content") Add wrapper selector (i.e. ".myribbon") Add shadows CSS 3 box-shadow Shadow on content

Colors

1. Front  
2. Back (left)  
3. Back (right)  
4. Edges  

Sizes (in pixels)

1. Front width
2. Ribbon height
3. Back left width
4. Back right width
5. Left overlap width
6. Right overlap width
7. Left overlap distance
8. Right overlap distance
9. Top left overlap height
10. Top right overlap height
11. Bottom left overlap height
12. Bottom right overlap height

Legend

Generate