Nowadays, the CSS ribbon effect is a web design trend. Whether you are using CSS ribbons to tag your products are using it as one of the web elements to show the options, there is a design for you in this list. If you looking for CSS Ribbons, then in this post UIFresh.net am going to share hand-picked CSS Ribbons for you. You can use these CSS Ribbons in your next web based projects.
22+ HTML & CSS Ribbon examples for free download [Latest Update 2025]
1. Various 6 Styles CSS Ribbons
- Author: UIFresh
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: December 15, 2021
2. Pure CSS Corner Ribbon
- Author: Naoya
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: December 7, 2020
3. CSS Cool Ribbon Shape
- Author: Katy DeCorah
- Links: Source Code & Demo
- Code with: HTML(Haml)/CSS(SCSS)
- Created on: March 7, 2018
4. Nice Ribbons Using Sass Mixins
- Author: Grélard Antoine
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: June 6, 2014
5. CSS Ribbon Banner
- Author: Kevin
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: May 5, 2016
6. Only CSS zig-zag Ribbon
- Author: nikhil
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: January 4, 2014
7. Olive Ribbon
- Author: Luca
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: July 8, 2018
8. CSS Animated Ribbon
- Author: John Graham
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS), Javascript
- Created on: August 31, 2015
9. Responsive CSS Only Ribbon
- Author: François Robichet
- Links: Source Code & Demo
- Code with: HTML/CSS, Javascript
- Created on: October 20, 2015
10. Beauty Ribbon Card
- Author: Sergio
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: October 25, 2021
11. Pure CSS3 Ribbon
- Author: Bryce Snyder
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: February 25, 2015
12. Colorful Rainbow Ribbon
- Author: ferdinand kuchlmayr
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: June 22, 2021
13. Ribbon Cutting Animation
- Author: Sreya Satheesh
- Links: Source Code & Demo
- Code with: HTML/CSS, Javascript
- Created on: May 7, 2021
14. CSS Navbar With Ribbon
- Author: Anthony Skelton
- Links: Source Code & Demo
- Code with: HTML/CSS(Less)
- Created on: April 24, 2016
15. Ribbon Article
- Author: Tim D
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: October 1, 2019
16. Ribbon Banner
- Author: Hans Kuijpers
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS), Javascript
- Created on: November 3, 2020
17. Simple Orange CSS Ribbon
- Author: lxx
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: January 25, 2021
18. Ribbon Menu With Hover Effect
- Author: Paolo Mazzacani
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: May 5, 2015
19. Discount Ribbon Animation
- Author: Mubarak Cc7
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: July 14, 2020
20. The Glow Ribbon
- Author: Manabjyoti Sarma
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: September 2, 2014
21. Strip + Skew Badge
- Author: Itzik Pop
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: June 24, 2021
22. Card Badge
- Author: Prasad D.
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: October 31, 2019
