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
![Various 6 Styles CSS Ribbons](https://uifresh.net/wp-content/uploads/2021/12/various-6-styles-css-ribbons.png)
- Author: UIFresh
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: December 15, 2021
2. Pure CSS Corner Ribbon
![Pure CSS corner ribbon](https://uifresh.net/wp-content/uploads/2021/12/pure-css-corner-ribbon.png)
- Author: Naoya
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: December 7, 2020
3. CSS Cool Ribbon Shape
![CSS Cool Ribbon Shape](https://uifresh.net/wp-content/uploads/2021/12/css-cool-ribbon-shape.png)
- Author: Katy DeCorah
- Links: Source Code & Demo
- Code with: HTML(Haml)/CSS(SCSS)
- Created on: March 7, 2018
4. Nice Ribbons Using Sass Mixins
![Nice Ribbons using sass mixins](https://uifresh.net/wp-content/uploads/2021/12/nice-ribbons-using-sass-mixins.png)
- Author: Grélard Antoine
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: June 6, 2014
5. CSS Ribbon Banner
![CSS Ribbon Banner](https://uifresh.net/wp-content/uploads/2021/12/css-ribbon-banner.png)
- Author: Kevin
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: May 5, 2016
6. Only CSS zig-zag Ribbon
![only CSS zig-zag ribbon](https://uifresh.net/wp-content/uploads/2021/12/only-css-zig-zag-ribbon.png)
- Author: nikhil
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: January 4, 2014
7. Olive Ribbon
![Olive ribbon](https://uifresh.net/wp-content/uploads/2021/12/olive-ribbon.png)
- Author: Luca
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: July 8, 2018
8. CSS Animated Ribbon
![CSS Animated Ribbon](https://uifresh.net/wp-content/uploads/2021/12/css-animated-ribbon.png)
- Author: John Graham
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS), Javascript
- Created on: August 31, 2015
9. Responsive CSS Only Ribbon
![Responsive CSS only ribbon](https://uifresh.net/wp-content/uploads/2021/12/responsive-css-only-ribbon.png)
- Author: François Robichet
- Links: Source Code & Demo
- Code with: HTML/CSS, Javascript
- Created on: October 20, 2015
10. Beauty Ribbon Card
![Beauty ribbon card](https://uifresh.net/wp-content/uploads/2021/12/beauty-ribbon-card.png)
- Author: Sergio
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: October 25, 2021
11. Pure CSS3 Ribbon
![Pure CSS3 Ribbon](https://uifresh.net/wp-content/uploads/2021/12/pure-css3-ribbon.png)
- Author: Bryce Snyder
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: February 25, 2015
12. Colorful Rainbow Ribbon
![Colorful Rainbow Ribbon](https://uifresh.net/wp-content/uploads/2021/12/colorful-rainbow-ribbon.png)
- Author: ferdinand kuchlmayr
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: June 22, 2021
13. Ribbon Cutting Animation
![Ribbon Cutting Animation](https://uifresh.net/wp-content/uploads/2021/12/ribbon-cutting-animation.png)
- Author: Sreya Satheesh
- Links: Source Code & Demo
- Code with: HTML/CSS, Javascript
- Created on: May 7, 2021
14. CSS Navbar With Ribbon
![CSS Navbar with Ribbon](https://uifresh.net/wp-content/uploads/2021/12/css-navbar-with-ribbon.png)
- Author: Anthony Skelton
- Links: Source Code & Demo
- Code with: HTML/CSS(Less)
- Created on: April 24, 2016
15. Ribbon Article
![Ribbon Article](https://uifresh.net/wp-content/uploads/2021/12/ribbon-article.png)
- Author: Tim D
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: October 1, 2019
16. Ribbon Banner
![Ribbon Banner](https://uifresh.net/wp-content/uploads/2021/12/ribbon-banner.png)
- Author: Hans Kuijpers
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS), Javascript
- Created on: November 3, 2020
17. Simple Orange CSS Ribbon
![Simple Orange CSS Ribbon](https://uifresh.net/wp-content/uploads/2021/12/simple-orange-ribbon.png)
- Author: lxx
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: January 25, 2021
18. Ribbon Menu With Hover Effect
![Ribbon Menu with hover effect](https://uifresh.net/wp-content/uploads/2021/12/ribbon-menu-with-hover-effect.png)
- Author: Paolo Mazzacani
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: May 5, 2015
19. Discount Ribbon Animation
![Discount Ribbon Animation](https://uifresh.net/wp-content/uploads/2021/12/discount-ribbon-animation.png)
- Author: Mubarak Cc7
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: July 14, 2020
20. The Glow Ribbon
![The glow ribbon](https://uifresh.net/wp-content/uploads/2021/12/the-glow-ribbon.png)
- Author: Manabjyoti Sarma
- Links: Source Code & Demo
- Code with: HTML/CSS
- Created on: September 2, 2014
21. Strip + Skew Badge
![Strip + Skew badge](https://uifresh.net/wp-content/uploads/2021/12/strip-skew-badge.png)
- Author: Itzik Pop
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: June 24, 2021
22. Card Badge
![Card Badge](https://uifresh.net/wp-content/uploads/2021/12/card-badge.png)
- Author: Prasad D.
- Links: Source Code & Demo
- Code with: HTML/CSS(SCSS)
- Created on: October 31, 2019