CSS Ribbons

(30 submissions) | Jan 18, 2018

A set of JSFiddle, CSSDeck, and CodePen snippets demonstrating the use of ribbons, created with CSS, lightweight and ready to implement.

CLOSE
    • download

    A flat-styled ribbon made in CSS that doesn’t exactly impress at first glance, but it contains a quite pleasant surprise in the form of a smooth animation that will open up the ribbon with the edges moving right after the main portion. It manages to keep the outcome simple, but somehow entertaining. This ribbon can be used and edited for free, and it was created by Josh Bader.

    • download

    A set of minimal style outlined ribbons featuring several shapes as diamond, ribbon, battle star, box, and rounded corners.

    • download

    A pure CSS developed badge made out of ribbons that allows you to feature a text inside it, perfect for featuring awards and prices.

    • download

    A good-looking banner styled with CSS only. It features subtle shadows for a well accomplished 3D effect and little details around the triangle edges. Additionally, a somewhat ornamental font decorates the ribbon and displays the information it was designed for.

    • download

    An animated ribbon developed in pure CSS that features nice and smooth transitions as you change the viewport size or hover over it.

    • download

    Quite an impressive SCSS ribbon animated with smooth sliding and fading in transitions at different times.

    • download

    A nice set of ribbons to feature either at the top or the bottom of containers designed in a nice flat style available in big, medium, and small sizes.

    • download

    A nicely crafted CSS modal that features a cool ribbon as an [X] close button that stretches a nit as you hover over it.

    • download

    A nicely pure CSS crafted ribbon that features a flat style in a blue scheme as well as folded ends that give it a cool feel.

    • download

    An amazing loading icon that features a summation symbol made out of a dark ribbon that slides along making itself into the shape of the symbol.

    • download

    A responsive CSS ribbon that features a nice stitched border sticking at 90% of the size of the viewport, perfect for titles of responsive pages.

    • download

    A nicely crafted JavaScript animation that gives your ribbon-featured logos quite a lot of life and action by loading and fading in bit by bit.

    • download

    A set of 5 nicely crafted different shaped SCSS buttons that lift up a bit as you hover over them. You’ll find diamond, ribbon, arrow, rounded, and sheer shapes.

    • download

    A beautifully crafted font created out of pure CSS made ribbons featuring smooth shadows that give this font a nice 3D feel.

    • download

    A neatly crafted animation in pure JavaScript for animating a smooth and nicely crafted CSS ribbon rising up from bottom to top.

    • download

    A simple design that offers an empty ribbon created with pure CSS. It can be useful for headings in all sorts of websites and devices, given its responsive design that adjusts to any situation. All credit goes to CodePen user Will Paige for developing this project.

    • download

    An orange ribbon logo created for titles of any kind and coded exclusively with CSS. It consists of this long element that goes around itself three times in order to show the three available text lines. It can be used for any occasion when a good amount of attention is required.

    • download

    A neatly CSS crafted ribbon for side edge containers of products or services that are on sale. It is subtly designed as a short ribbon so as to not cover the content of the product/service’s card.

    • download

    A good-looking CSS ribbon with a beautiful color palette and overall style that reminisces of ancient Rome. The asymmetric bend around the edges is also a nice point to address, as well as the font. Although as you know, you can always change these details by hacking the code.

    • download

    A nice red ribbon design that includes a couple of gradient and shadow effects for a polished look. This element was styled with CSS in its entirety. As a nice detail, a couple of buttons allows us to change the size of the element constantly at will. Created by Chris Harris based on a piece of work found at Premium Pixels.

    • download

    An animated CSS Ribbon loader, highly customizable and perfect to be included in your personal or commercial project. The ribbon moves up and down changing its color.

    • download

    A smooth and easy ribbon design. You can modify the text inside of this element directly and its size is totally responsive to the size of your text.

    • download

    An awesome ribbon that portrays a quite basic look at first, but when hovering on it, we can see how the menu “bends” and animates in a slick fashion, bringing out the options to highlight them (and switching colors to a nice orange for as long as the selection is being hovered). The design is completely styled with CSS.

    • download

    A nicely crafted ribbon that features a rounded fold around the left edge of the container that features it, perfect for titles of containers with flat style content.

    • download

    A very attractive corner ribbon made in CSS, ideal for placing on top of other elements within the website. It comes with a set of beautifully arranged lighting and shadow effects that give it a somewhat impressive – if not realistic – look and feel. This project was developed by CodePen’s Anthony Collurafici.

    • download

    A responsive ribbon created entirely with the help of CSS. The demo even includes a selector to change the size of the element with no problem. The ribbon features gradient and shadow effects with triangle edges on the back. Uploaded by Calou to JSFiddle.

    • download

    Ribbons in pure CSS forming the letter “M” in different colors, a really simple snippet to add into your next website or mobile app. In this example, there are eight different tones you can choose from, and you can always grab the code and modify it. Created by André Kussmann.

    • download

    A classy pair of animated ribbons created by Bennett Feely from CodePen. The concept is quite simple, consisting of two elements that animate up and down in an endless loop. Can’t see many practical uses for this, but it sure represents a good bit of fun.

    • download

    A nice curved ribbon designed in CSS completely. The aforementioned curve is definitely the standout here, as it provides great dimension and perspective to an otherwise “normal” ribbon. It is very easy to customize, so you should not have much trouble adjusting this element according to your needs.

Leave a comment

30 comments for CSS Ribbons
  • nice things you did here
    Reply · 2016-09-01T08:25:58+0000
  • Nice! Thanks. How to add corner ribbon css button to every post in home page..Of blogger blog?
    Reply · 2016-05-24T23:32:39+0000
    • Hello! To do that you should add the ribbon in your default posts template.
      Reply · 2016-05-26T11:02:26+0000
  • Great ! That's pretty cool bundle. Thanks! Tasos
    Reply · 2016-05-19T17:22:26+0000
    • Thanks Tasos! keep tuned for more :)
      Reply · 2016-05-21T08:34:40+0000
  • very useful... thanks to all.
    Reply · 2016-05-15T03:03:35+0000
    • That's no worries! Glad they come in handy for you :)
      Reply · 2016-05-21T08:29:46+0000
  • thanks, really cool 4 those who have no talent to painting
    Reply · 2016-04-28T13:53:19+0000
    • Haha ^^' You're quite right it is really only a few talented people who could do stuff like these ribbons :)
      Reply · 2016-04-29T17:12:23+0000
  • very useful and nice collections, thank you
    Reply · 2016-04-18T09:07:05+0000
    • It's great that you find it all very useful, stick around and discover more cool collections! :)
      Reply · 2016-04-19T11:34:02+0000
  • best collection
    Reply · 2016-04-02T09:59:18+0000
    • Thank you!! Very glad you like it Keep tuned for more cool resources ;)
      Reply · 2016-04-18T17:59:38+0000
  • Brilliant work. Thank you
    Reply · 2016-03-29T02:30:32+0000
    • Thank you, we're very glad you like it.
      Reply · 2016-04-19T11:29:15+0000
  • thank you
    Reply · 2016-03-14T07:39:47+0000
    • You're welcome! Thanks for following us :)
      Reply · 2016-03-14T16:44:03+0000
  • nice resource (for designers)
    Reply · 2016-03-11T03:43:48+0000
    • Thank you! It's definitely a good collection :)
      Reply · 2016-03-14T16:31:37+0000
  • thats a great work i like it
    Reply · 2016-03-02T01:49:21+0000
    • Great! Don't forget to take them all with you :)
      Reply · 2016-03-02T09:40:05+0000
  • Bless you for making web design very easy for some of us. Love you
    Reply · 2015-12-15T05:17:21+0000
  • Thanks to all
    Reply · 2015-06-29T13:19:44+0000
  • It's really awesome.... I like that here are many ribbon <3
    Reply · 2015-04-27T07:56:58+0000
    • Thank you! Glad you're liking this collection. :)
      Reply · 2015-04-27T09:38:54+0000
  • Hightech Ribbons,,, Thanks to all
    Reply · 2015-02-14T12:11:06+0000
  • very nice :D
    Reply · 2015-02-04T03:46:10+0000
  • its too good and i have to use it into my project.thanks a lot for posting this .
    Reply · 2015-01-24T04:59:41+0000
This a test message in global notification
Your download will start shortly.

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator