Ribbons – 8 Free CSS Ribbon & Banner Sets
Ribbons is a pack of eight sets: diagonal corner ribbons, horizontal banners with shaped ends, small ribbon badges, ribbon headings, vertical ribbons, price and sale ribbons, dark-interface variants and award rosettes. Everything is drawn with borders, clip-path and pseudo-elements — no images anywhere.
At a glance
- 8 sets, one folder each, single
index.htmlper set - Pure CSS — no images, no SVG files, no icon font, no JavaScript
- Any ribbon takes any label and any colour without re-exporting an asset
- Corner ribbons stay clipped to their card rather than escaping it
- No framework, no build step, no dependencies
FAQ
Are these CSS ribbons free?
Yes. All eight sets are free for personal and commercial projects, including client work, and download as a single ZIP with no signup.
How do you make a corner ribbon in CSS?
Position a band absolutely over the corner, rotate it 45 degrees, and give it a negative offset so it runs past both edges. The container needs overflow:hidden — that is what trims the band to the corner instead of letting it stick out.
