40+ CSS Ribbons

Last Updated on by in CSS Examples
CSS Ribbons

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)

 

 

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.