Are you in search of an engaging assortment of CSS ribbons that can effortlessly highlight crucial information, directing the user’s focus to specific elements like promotions, discounts, or essential messages on a webpage? Look no further.
In this post, we unveil a comprehensive compilation of free HTML and CSS code samples, showcasing an array of CSS ribbon examples curated from esteemed websites such as GitHub and CodePen. These repositories boast meticulously designed, stylish, and innovative ribbon shapes crafted using CSS, catering to a wide spectrum of website themes and objectives.
CSS ribbons are decorative UI elements that can enhance the overall look and offer a dynamic way to add flair and style to user interfaces. Our collection offers a diverse range of ribbon designs, including corner ribbons, creative ribbon banners, glow ribbons, and animated ribbons.
Ribbons not only enhance visual appeal but also serve as user-friendly elements, serving multiple purposes such as decorative enhancements, indicating information hierarchy, highlighting statistics or urgency, serving as effective calls-to-action, and reinforcing brand identity.
Our collection is equipped with dynamic colors, transitions, and creative designs, empowering web designers and developers to significantly enhance user engagement and pique user interest, fostering a more interactive and memorable browsing experience. Each ribbon code example is highly customizable; you can change their color, style, and typography with just a few lines of CSS.
Explore our cutting-edge and visually striking CSS ribbon designs to elevate website aesthetics, boost user engagement, and enhance visual allure.
1. CSS-only corner ribbons for GitHub links
See the Pen
???? CSS-only corner ribbons for GitHub links by Explosion AI (@explosion)
on CodePen.
Author: Explosion AI @explosion
Links: Source Code / Demo
Created on: October 1, 2016
Made with: HTML(Pug), CSS (Sass)
2. Single Element CSS Banner
See the Pen
Single element CSS banner by Anders Grimsrud (@agrimsrud)
on CodePen.
Author: Anders Grimsrud @agrimsrud
Links: Source Code / Demo
Created on: September 8, 2012
Made with: HTML, CSS
3. Ribbon In The Wind
See the Pen
Ribbon in the wind by Nick Watton (@2Mogs)
on CodePen.
Author: Nick Watton @2Mogs
Links: Source Code / Demo
Created on: October 24, 2019
Made with: HTML, CSS(SCSS), JS
4. Mail Gradient Ribbon
See the Pen
mail gradient ribbon by Nikolay_nmsk (@Nickolyashka)
on CodePen.
Author: Nikolay_nmsk @Nickolyashka
Links: Source Code / Demo
Created on: December 19, 2017
Made with: HTML, CSS(Sass)
5. Ribbon Preloader
See the Pen
Ribbon Preloader by Jon Kantner (@jkantner)
on CodePen.
Author: Jon Kantner @jkantner
Links: Source Code / Demo
Created on: April 8, 2022
Made with: HTML, CSS
6. CSS3 Ribbons
See the Pen
CSS3 ribbons by Elena Nazarova (@nazarelen)
on CodePen.
Author: Elena Nazarova @nazarelen
Links: Source Code / Demo
Created on: May 2, 2016
Made with: HTML, CSS
7. CSS Grid Ribbon Layout
See the Pen
CSS Grid Ribbon layout by Andy Barefoot (@andybarefoot)
on CodePen.
Author: Andy Barefoot @andybarefoot
Links: Source Code / Demo
Created on: February 10, 2018
Made with: HTML, CSS, JS
8. Github-style-ribbon
See the Pen
github-style-ribbon by Srikanth Shreenivas (@srikanthps)
on CodePen.
Author: Srikanth Shreenivas @srikanthps
Links: Source Code / Demo
Created on: July 26, 2018
Made with: HTML, CSS(SCSS)
9. Ribbon Menu
See the Pen
Ribbon Menu by Takane Ichinose (@takaneichinose)
on CodePen.
Author: Takane Ichinose @takaneichinose
Links: Source Code / Demo
Created on: November 9, 2018
Made with: HTML, CSS(SCSS), JS
10. Olive Ribbon
See the Pen
Olive ribbon by Luca (@Kerruba)
on CodePen.
Author: Luca @Kerruba
Links: Source Code / Demo
Created on: July 7, 2018
Made with: HTML, CSS
11. CSS Ribbon
See the Pen
CSS Ribbon by CSS-Tricks (@css-tricks)
on CodePen.
Author: CSS-Tricks @css-tricks
Links: Source Code / Demo
Created on: February 22, 2016
Made with: HTML, CSS
12. CSS Animated Ribbon
See the Pen
CSS Animated Ribbon by Josh Bader (@joshbader)
on CodePen.
Author: Josh Bader @joshbader
Links: Source Code / Demo
Created on: May 10, 2013
Made with: HTML, CSS, JS
13. CSS Ribbon
See the Pen
CSS Ribbon by Simon Coudeville (@simoncoudeville)
on CodePen.
Author: Simon Coudeville @simoncoudeville
Links: Source Code / Demo
Created on: January 26, 2013
Made with: HTML, CSS(SCSS)
14. CSS3 Ribbon Design: Overlapping & Rotated Background Elements
See the Pen
Ribbon Design: Overlapping & Rotated Background Elements by Aysha Anggraini (@rrenula)
on CodePen.
Author: Aysha Anggraini @rrenula
Links: Source Code / Demo
Created on: November 3, 2017
Made with: HTML, CSS(SCSS)
15. Pure CSS3 Overlay Ribbon
See the Pen
Pure CSS3 Overlay Ribbon by Mauritius D’Silva (@mauritiusdsilva)
on CodePen.
Author: Mauritius D’Silva @mauritiusdsilva
Links: Source Code / Demo
Created on: December 1, 2015
Made with: HTML, CSS, JS
16. Pure CSS Corner Ribbon
See the Pen
Demo: Pure CSS corner ribbon by Naoya (@nxworld)
on CodePen.
Author: Naoya @nxworld
Links: Source Code / Demo
Created on: July 25, 2016
Made with: HTML, CSS
17. Easy CSS Ribbon With Sass
See the Pen
Easy CSS Ribbon with Sass by Peiwen Lu (@P233)
on CodePen.
Author: Peiwen Lu @P233
Links: Source Code / Demo
Created on: January 12, 2014
Made with: HTML, CSS(SCSS)
18. Silly Banner
See the Pen
Silly Banner by Scott Dunham (@ultraloveninja)
on CodePen.
Author: Scott Dunham @ultraloveninja
Links: Source Code / Demo
Created on: February 14, 2018
Made with: HTML, CSS(SCSS)
19. CSS Ribbon
See the Pen
CSS ribbon by web-tiki (@web-tiki)
on CodePen.
Author: web-tiki @web-tiki
Links: Source Code / Demo
Created on: March 10, 2015
Made with: HTML, CSS
20. UL banner cards
See the Pen
UL banner cards by Mark Boots (@MarkBoots)
on CodePen.
Author: Mark Boots @MarkBoots
Links: Source Code / Demo
Created on: March 6, 2022
Made with: HTML, CSS
21. Google Books Ribbon Single element
See the Pen
Google Books Ribbon Single element by ???????????????? ???????????????????????????????????? (@andywillekens)
on CodePen.
Author: ???????????????? ???????????????????????????????????? @andywillekens
Links: Source Code / Demo
Created on: June 16, 2016
Made with: HTML(Pug), CSS(SCSS)
22. Bootstrap 4 Simple Cards With Ribbons
See the Pen
Bootstrap 4 Simple Cards With Ribbons by Adam M. Victor (@adamvictor0012)
on CodePen.
Author: Adam Victor @adamvictor0012
Links: Source Code / Demo
Created on: June 29, 2019
Made with: HTML, CSS(SCSS)
23. The Glow Ribbon
See the Pen
The glow ribbon by Manabjyoti Sarma (@manab_27)
on CodePen.
Author: Manabjyoti Sarma @manab_27
Links: Source Code / Demo
Created on: September 2, 2014
Made with: HTML, CSS
24. Corner Ribbons
See the Pen
Corner Ribbons by Miro Karilahti (@miroot)
on CodePen.
Author: Miro Karilahti @miroot
Links: Source Code / Demo
Created on: March 22, 2014
Made with: HTML, CSS
25. Pure Css Animated Ribbon
See the Pen
pure css animated ribbon by Loray O’Connell (@lorayoconnell)
on CodePen.
Author: Loray O’Connell @lorayoconnell
Links: Source Code / Demo
Created on: February 18, 2017
Made with: HTML, CSS
26. OP UK NEW PODS Ribbons
See the Pen
OP UK NEW PODS ribbons by Merch (@merch-EDO)
on CodePen.
Author: Merch @merch-EDO
Links: Source Code / Demo
Created on: September 14, 2017
Made with: HTML, CSS
27. PURE CSS3 RIBBON
See the Pen
PURE CSS3 RIBBON by alberto tafoya (@withattribution)
on CodePen.
Author: alberto tafoya @withattribution
Links: Source Code / Demo
Created on: January 31, 2014
Made with: HTML, CSS(SCSS), JS
28. Folded and rotated ribbon
See the Pen
Folded and rotated ribbon by Temani Afif (@t_afif)
on CodePen.
Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: February 7, 2022
Made with: HTML, CSS
29. CSS Ribbon Cards
See the Pen
Ribbons by Brandon Couts (@brandoncouts)
on CodePen.
Author: Brandon Couts @brandoncouts
Links: Source Code / Demo
Created on: February 4, 2019
Made with: HTML, CSS
30. Ribbon Article
See the Pen
Ribbon Article by Tim D (@tjdunklee)
on CodePen.
Author: Tim D @tjdunklee
Links: Source Code / Demo
Created on: September 11, 2013
Made with: HTML, CSS(SCSS)
31. CSS3 Ribbon
See the Pen
CSS3 Ribbon by Deven Blackburn (@makecodenotwar)
on CodePen.
Author: Deven Blackburn @makecodenotwar
Links: Source Code / Demo
Created on: January 9, 2017
Made with: HTML, CSS(SCSS)
32. Responsive Rounded Ribbon
See the Pen
Responsive Rounded Ribbon by Diego Pardo (@diegopardo)
on CodePen.
Author: Diego Pardo @diegopardo
Links: Source Code / Demo
Created on: January 29, 2013
Made with: HTML, CSS, JS
33. Decorative Ribbon Heading
See the Pen
Decorative Ribbon Heading by Will Boyd (@lonekorean)
on CodePen.
Author: Will Boyd @lonekorean
Links: Source Code / Demo
Created on: February 23, 2021
Made with: HTML, CSS
34. Pure CSS Corner Ribbon
See the Pen
Pure CSS Corner Ribbon by Anthony Collurafici (@CSS3fx)
on CodePen.
Author: Anthony Collurafici @CSS3fx
Links: Source Code / Demo
Created on: February 12, 2013
Made with: HTML, CSS
35. Ribbons
See the Pen
Ribbons by NANOUU (@antoniasymeonidou)
on CodePen.
Author: NANOUU @antoniasymeonidou
Links: Source Code / Demo
Created on: January 27, 2021
Made with: HTML (Haml), CSS (SCSS)
36. Ribbon On Heading
See the Pen
Ribbon on Heading by Rajesh Budhathoki (@rajoyish)
on CodePen.
Author: Rajesh Budhathoki @rajoyish
Links: Source Code / Demo
Created on: August 19, 2017
Made with: HTML, CSS
37. CSS Animated Ribbon
See the Pen
CSS Animated Ribbon by John Graham (@RobotsPlay)
on CodePen.
Author: John Graham @RobotsPlay
Links: Source Code / Demo
Created on: August 28, 2015
Made with: HTML, CSS(SCSS), JS
38. Sale label
See the Pen
Sale label by @BrawadaCom (@Anna_Batura)
on CodePen.
Author: @BrawadaCom @Anna_Batura
Links: Source Code / Demo
Created on: January 5, 2021
Made with: HTML(Slim), CSS (SCSS)
39. Winner Card
See the Pen
Winner Card by Kiran Raj (@slashback)
on CodePen.
Author: Kiran Raj @slashback
Links: Source Code / Demo
Created on: December 8, 2019
Made with: HTML, CSS, JS
40. CSS clip-path Ribbons
See the Pen
CSS clip-path Ribbons by crayon-code (@crayon-code)
on CodePen.
Author: crayon-code @crayon-code
Links: Source Code / Demo
Created on: December 28, 2020
Made with: HTML, CSS(SCSS), JS
41. END by Catt
See the Pen
END by Catt by Katy DeCorah (@katydecorah)
on CodePen.
Author: Katy DeCorah @katydecorah
Links: Source Code / Demo
Created on: December 31, 2013
Made with: HTML(Haml), CSS (SCSS)
42. (Красная ленточка)Red Ribbon
See the Pen
Красная ленточка by Sultan Sailaubayev (@desali)
on CodePen.
Author: Sultan Sailaubayev @desali
Links: Source Code / Demo
Created on: February 3, 2020
Made with: HTML, CSS(SCSS)
43 Card-Ribbon | CSS
See the Pen
Card-Ribbon | CSS by Sudeep Gumaste (@sudeepgumaste)
on CodePen.
Author: Sudeep Gumaste @sudeepgumaste
Links: Source Code / Demo
Created on: May 21, 2020
Made with: HTML, CSS(SCSS)