CLOSE
    A growing repository with 727 bundles & 9740 resources for web ninjas
    (freebies, plugins and snippets) updated & curated every day, so it never expires.
CLOSE
    • CSS Forms (59 submissions)

      Gather information from your users with a beautiful CSS form, avoiding the boring default look and making user experience a little bit more enjoyable.

      • Card: HTML & CSS Credit Card Visual Form

        A beautifully crafted credit card form that shows in a visual way the information of your credit card. It will take the form of any credit card thanks to the power of CSS and HTML. It is free to use in commercial and personal projects.

      • CSS and JavaScript Donation UI Concept

        A nice user interface for donations, perfect for NGOs and non-profit organizations. It consists of a simple menu with a title and several options for money. Once an amount is selected, it appears a form with various fields like name, email, address, location and more.

      • Pure CSS Questionnaire Concept

        A compelling questionnaire made in pure CSS with hover effects and a material design. It consists of a medium-size widget with a featured area that changes when you select an item of the menu. It is a free snippet, easy to implement in any project and created by Nikolay Talanov.

      • CSS & jQuery Hidden Form

        A subscription form made in CSS and jQuery that is hidden in the first place, but it gets revealed once a button is clicked. It has a flat style and is really lightweight, making it easy to implement. The code can be used and modified freely, and it was created by Drew McConville.

      • Single Input 3D Form Code Snippet

        A crafted CSS and JavaScript form, perfect for any website owner that wants to include a subscription input field or style the one already in place. It is cool since it looks pretty normal when you first look at it, but once you hover you'll see a 3D effect; the users type their email address, and after that they'll see another 3D effect for confirmation. It was created by Son Tran-Nguyen, and you can tweak the code to match your sites styling.

      • Pure CSS Flat Login

        Here we have a flat login interface with a various simple design elements. It has an icon on the top, a label, username and password areas, a "forgot password" link, a button that changes color when clicked, and additional labels for new members. This code snippet was created with pure CSS, using crafted fonts from Google Fonts, and it was made free to download by its creator Tim Bogdanov.

      • Animated Upload Button

        This is a simple upload button created by Nathan Butler. It features a simple upload button right in the middle, displaying a range animation in order to inform the status of the upload process (a small progress bar). The beautiful background is definitely not easy to overlook, either. This is a code snippet that you can edit and improve to integrate it into your next creation.

      • Embed Base64: Client-Side Encoder

        This extremely simple, client-side base64 encoder provide a neat and straightforward interface. You can use it for small images, for example; since fewer requests can make your website load faster. Another possible use is if you want to pack everything in a single HTML file.

      • Simple Upload Form with Queue

        A basic upload form based on a Dibbble shot by Designmodo. It allows the addition (and deletion) of multiple files on queue while a glowing progress bar/percentage bubble provides a classy status update. The skin is quite simple, with a nice background texture as a stand out.

      • Paper Login Form

        A piece of paper stuck to the wall with sticky tapes that will allow users to access your website in a different way. Everything is styled with CSS through gradient and box shadow effects. This form, created by CodePen’s Carl Calderon, supports all major browsers in their latest versions.

      • Secure 3D Login Form

        A set of 3D-styled fields that form a login interface. The multi-dimensional effect is achieved by applying the box shadow CSS property. Also, the boxes present a delicate "pushed" animation as soon as they are clicked, this same detail has been applied to the final “login” button.

      • Solid and Minimalistic Login Form

        A simple login interface featuring a basic flat design and pop-up notifications in case the information entered is not correct. Of course, the always useful “forgot password?” link is available for those confused users. Uploaded to CodePen by Marco Biedermann.

      • Sleek Sign Up Form

        This is a gorgeous sign up form design developed by Emil Andersson from CSS Deck. First thing you will notice is the smooth blue gradient background, truly polished. Then it’s time to move on with the actual form, which carries a clean style with subtle yellow borders for selected fields. A pretty button finishes the already pleasant experience.

      • Floating Admin Login Form

        Here we have a useful login form that displays the password when switching a control, this double check avoids possible mistakes (particularly on mobile devices) so the user does not have to start all over again. A “Forgot password?” button is also available for troubled users.

      • Orange Solid Edges Login Form

        A stripped-down login screen design, providing only a couple of boxes for fast access. When it comes to styling, the boxes come with a thick orange border going around them, plus a solid, dark login button to wrap up the process. Uploaded to CodePen by user Baylor Rae’.

      • Apple Developer Login

        A cool login form inspired by Apple's design, created and styled in pure CSS. It features a nicely contrasted orange and black skin with an interesting background texture. Also, the input and login buttons feature attractive hover and click effects. Uploaded to CodePen by Christophe Benoliel Molina.

      • Minimal and Colorful Login Form

        A small and straightforward login form design to validate users while taking little space on the webpage space, in the hopes of providing a quick, uncomplicated experience to whoever tries to access. The violet skin stands out, given the simplicity of its design.

      • Simple Transparent Input Boxes

        A login box with wonderful styling, coded by CodePen user Tyrus. First, it features a colorful blurred background that can be seen through the transparent input forms where we enter our login info. When selecting each of the boxes, a nice glowing effect comes up, as well.

      • CSS3 Badge-Like Login Form

        A pretty login form created in CSS3 based on a Dribbble shot by Ionut Zamfir. It features an office-badge-like interface with a great pair of icons for e-mail and password, styled with nothing but pure CSS. The login button also carries neat shadow when the user clicks on it.

      • Facebook Login Form

        A basic login form design with HTML and CSS. It aims to connect people using Facebook and help them access your site with their information from the social network. Also, password recovery services are included within this project. The original PSD is available for you, as well.

      • Fun with Pattern and Pseudo-Selectors

        This login form notifies the user if the information entered is valid or not in a pretty original way. When the e-mail is correct, the whole page turns green, but if it  is wrong, red is what they’ll see. It gives a bright look to the site while providing a useful feature, so well done!

      • Ubuntu Inspired Login

        A wonderful login form inspired in Ubuntu. It features a bright and colorful background along with a translucent box included a couple of input boxes. The fields become opaque (with a sweet transition in between) when clicking on them, and the “remember me” button saves the credentials for future usage.

      • Mobile Twitter Login Design

        A great interface for allowing users to login socially with Twitter, focusing on mobile devices. Just like any handheld form should be, it is simple and straightforward with buttons for signing up, recovering the password and remembering the credentials for future use.

      • Black Login Form

        A flat-styled login form for basic and fast user access. Its dark interface keeps everything as stripped down as possible while the classy logging in animation provides the always needed touch of glamour to this login interface after entering the proper information.

      • HTML5 and CSS3 Login Form

        A two-color login form design that includes gradient backgrounds for styling. Apart from the login info, this tool provides password recovery and additional assistance options. It only applies HTML and CSS to handle its operation. Created by CSSDeck user LukyVj.

      • Simply Login Form

        A simple login form created with the help of CSS3 only. The form itself is rather straightforward, using basic CSS properties for styling and an easy markup. The colorful background is also styled with CSS3, providing a very marked contrast that lights up the whole design.

      • Login Form 3D Animation

        A neat double login form for both admins and average users. The transition between logins is triggered by a button on the top left of the design that activates a smooth rotating animation. It features a simple design with subtle effects that should blend well with most websites.

      • Flat UI Login Form

        A fork from a similar project by David East, this menu provides a complete from that not only allows users to login, but also helps them with their password in case they lose it thanks to a password recovery tab. Moreover, it welcomes new members right away with another tab including a sign-up form.

      • Login Form On HTML5

        An attractive login form with an interesting “stacked paper” effect created with pure CSS by Vladimir Banduristov. This look provides depth to the design while focus highlights attract attention towards the input forms. Finally, registering and password recovery options are included.

      • Iron Man Login Form

        A sharp login form that recreates the one seen on the Iron Man movies. A constantly circling element goes around the gradient-including main box containing the input forms. A few more details are added, like the bright border and the patterned background design.

      • Simple Login-Subscribe Form

        An attractive login panel created entirely in CSS by Hugo Giraudel. If the user doesn’t have an account, a big “register” button guides them through the process of obtaining a brand new profile for your website so they can make use of this login form to access.

      • LESS Flat Form

        A simple login form created in CSS (LESS) and uploaded to CodePen by Joe Richardson. It features a flat look with highlight effects on its input fields. Also, the login button includes a cool animation that gives it an attractive 3D style, but nothing over the top.

      • Basic CSS Login Form

        A basic login form with a cool shadow underneath that gives it a “floating” effect. Also, the login button implements a sweet transition when clicking on it. The username and password fields have been left simplified and straightforward. Created by Julio Donoso from CodePen.

      • Flat Semantic Form

        A pretty set of input fields and selection elements, all styled with a flat two-tone design. Everything has been simplified to the max, to the point where dropdown menus don’t have arrows or signals, which can be a bit confusing at first. This project was developed by CodePen user Emily Young.

      • Flock Login in Pure CSS

        A classy login form that provides additional options by clicking on the settings button on the top left, which comes down when hovering with the cursor near it. A password recovery button is also added at the bottom of the design. Uploaded to CodePen by Mojtaba Seyedi.

      • Unmask Password On Focus

        A cool form that displays the password a user just entered when focusing on the box. This is a great option for double-checking purposes, and will surely avoid mistakes when logging in. However, these mechanics are not the most secure ever, so you should be careful with their implementation.

      • Changeable Background Login PSD Template

        A beautifully styled login form features a full-page slideshow of colorful blurred images sitting behind a smooth, transparent pair of input fields and a login button with neat shadow effects. It also includes the option to log in with Facebook or Twitter. The original PSD is available in case you’d like to experiment.

      • Custom Login Form Styling

        A complete Codrops tutorial on how to create compelling login forms for your websites. Here, we are provided with five beautiful designs we can use as guidance and inspiration. They feature all sorts of effects, including transparencies, hover animations and more.

      • Login Form Using CSS3 and HTML5

        Here we have an article from Red Team Design that goes through the whole creation process of this nice login form using only HTML5 and CSS3. The interface itself features some cool focus effects and a smooth transition when interacting with the final "log in" button.

      • Red Flat Login Form

        This stripped-down version of a login form was based on a Dribbble shot and developed in pure CSS by Marco Biedermann. It gets right to the point with its presentation, featuring just user, password and login buttons in order to get you through the signing in process ASAP.

      • Login Form Testing HAML and SASS

        A joyful login form created with HTML (HAML) and SASS. The login box itself floats around with a subtle up and down animation, while clouds make their way through the background at various speeds. This awesome design was created by CodePen user Martin Wolf.

      • Forgot Your Password?

        If your users are having issues with their login information, making them go through another page load can be quite a pain for them. Avoid this annoyance with this login form that automatically brings up the password recovery options when clicking on the “Forgot your password?” button.

      • Connectez-Vous Login Form

        A pretty login form with an attractive color palette and great overall styling. It serves as a simple interface for users to access their profiles easily. It comes with a good few effects, like the blurred background, hover highlight on the login button and shadows when clicking on the input boxes.

      • Blue Gradient Login Form

        A simply styled login screen designed by Josh Green from CodePen. It displays a subtle and appealing glowing effect when clicking on the input forms and a shadow when performing the same action over the login button. Everything is contained within a nice blue gradient background.

      • Minimal Style Login Form

        A minuscule and clean login form, ideal for cases when you don’t intend to take too much space in favor of a reduced, stripped-down design (or just ’cause you like simple stuff, right?). It features cool icons next to both input fields and violet details. Created by Tony Montemorano.

      • Amazing CSS3 Login Form

        A smoothly styled login form created in pure CSS3. Its little details separate it from the rest and make it a very attractive tool: Sliding icons come out of the sides when clicking them and soft edges decorate the login button on hover. Plus, a register button is available (with effect included) to welcome new users.

      • All-Blue Login Form

        A showy login form created with CSS3. It features an entirely blue design with nice and subtle effects, this is particularly noticeable on the login button, which has an attractive shining look. Also, pop notifications are included in case the information entered is not valid. Created by CodePen user 2ne.

      • Login Form Flat Red

        A simply-styled login interface developed by Marco Biedermann from CodePen. It does not contain any animations or effects, focusing on providing a fast, non-complex experience for the user. The flat design features a bright red header and a green sign in button.

      • Transparent Login Form

        A fantastic login form with a translucent skin and randomized background provided by LoremPixel. It is based on a Dribbble shot posted by Bojana, with the inclusion of Open Sans Condensed Hope instead of the good old Helvetica font. Coded by CodePen user Thomas Bertok.

      • Transparent Upload Form

        A beautiful upload form with drag and drop functionality. It carries an awesome transparent skin which mixes really well with the abstract, colorful background, while the glowing progress bar displays the percentage through a small bubble. Multiple elements can be added to the queue.

      • Social Login Form

        An easy login interface with a flat look that offers the option to access the site with registered information or use a social network (Twitter, Facebook and Google+) to enter. This project was developed and uploaded to CodePen by the user 91bananas.

      • Login with Facebook or Twitter

        Marco Biedermann from CodePen brings us this classy login screen that allows users to access the website with their registered credentials or socially with either Twitter or Facebook. It features a simple and flat design that goes well with the colors of both social networks.

      • Black and Pink Login

        A basic login form with a nice dark skin and a pair of icons positioned next to every input field. The theme is nicely contrasted with the pink login button that stands out above the design. It also welcomes new users with the sign up link below. Created and uploaded to CodePen by Marco Biedermann.

      • Welcome to Jamrock: Flat UI Form

        A login form without too much to get distracted about, except the nicely animated login button. Forgot your password? There’s also a button included for that. All wrapped up in a nice bright red background. Uploaded to CodePen by Joe Richardson.

      • Flat and Detailed Form

        A clean and really good looking set of forms and selectors. It styles a flat design with lots of details that come up on hover and focus, like the lit-up icons (when there’s any) or the colored borders that appear when clicking on an input field. Created by Abhishek Hingnikar.

      • Slide to Reveal Password

        This concept coded by Nicolas Slatiner is a login form with a slider that reveals the hidden password when activated. This is particularly useful for mobile interfaces since making mistakes when typing on smaller screens is a lot more common; with this tool, the user can be sure they won’t have to start over.

      • Login Violet Form

        Here we have a beautiful login form with a clear and simple interface. The background features a nice violet-to-blue gradient that blends really well with the login button and the soft effects applied to the input fields. Created by Tyler Fry and hosted at CodePen.

      • Batman Login Form

        This pen by Hugo Giraudel intends to recreate a Dibbble shot designed by Virgil Pana. The main idea was to generate that good-looking shiny light effect seen on top of the form with pure CSS. Apart from that nice touch, it displays a couple of hover effects and a dark, sober style.

      • Admin Login Form

        This simple login form allows the user to unmask the password they just entered by clicking on a switch control. This reduces the chances of making a mistake and having to type the whole thing again. Plus, a cool CSS shadow gives the form a smooth “floating” effect.

      • Collapse Expand List View all items Download Bundle Submit
    • Cool Fonts (106 submissions)

      A list comprised of cool fonts, with multiple shapes, styles and weights for personal and commercial projects.

      • Promesh Two: Free College Athletics Typeface

        Promesh Two is a cool typeface meant to be used in college campuses and students' environments. It has that vibe of college athletics, constituting a great option for advertising sports and fitness products to younger audiences. The font comes in TTF and you can use it on any project. It was created by Paul Reis.

      • Parker: Grunge-style Free Font

        Parker is a grunge style and totally handmade vintage-inspired font. It is perfect for natural posters, and other creations like logos and badges. The font comes in TTF format and has uppercase and lowercase, numbers, and special glyphs.

      • ATHENA: Post-modern Acute Typeface

        A cool typeface that feels like looking those old buildings from ancient greece. The font is only uppercase, includes numbers and some special characters. It comes in TTF format. It was created by Alcir Heidemann.

      • Ailerons: Sharp 1940s-inspired Typeface

        A modern typeface inspired by the aircraft industry of the 1940 decade that can be used only in personal projects. The font comes in TTF format and it can be used both in Mac and PC. It is perfect for headlines and printed designs. The font was created by Adilson Gonzales de Oliveira Junior

      • Melma: Hand Crafted Font

        A beautiful hand crafted font. This font includes three variations, inline, cracked and black, and it comes in TTF format. It is perfect for posters and advertising, mainly printed designs although it works good on web environments. This font was created by Rafa Miguel.

      • Story Brush: Detailed Handwritten Typeface

        Story brush is a detailed brush font that includes over 240 characters and comes in two weights: regular and slanted. It comes in OTF and TTF format and it can be used for printed posters and t-shirts, among many other. This font is free to download and use on any project.

      • Velodroma: Wide Display Sans-serif Typeface

        Velodroma is a wide font, perfect for advertising purposes and large posters with a modern style, sharp edges and wide characters. This font comes as OTF, And has three weights (Regular, SuperWide and Wide). This font can be used in any project for free.

      • Smaq: Free Sharp & Modern Typeface

        A beautiful sharp-edge font, ideal for posters, logos and other printed design, available as TTF. It includes 8 styles for free, all of them uppercase including latin and greek characters. This font can be used freely and it was created by Andreas Leonidou.

      • CIRCO: Colorful & Fancy Free Font

        A beautiful colorful font that resembles the ones used in actual circuses. It has different shapes and colors, making it a playful font that you can use in posters, clothing and even on websites. This font comes in format for MAC and you can use it only for personal projects.

      • Hamster: Free Script Bold Font

        Hamster is a bold script typeface perfect for branding, clothing, advertising, headlines and more. It was crafted carefully to equalize the dynamic flow and legibility. It comes in OTF format and it is free to download and use in print and web, personally or commercially.

      • Badhead: Free Stylish Script Typeface

        A great script font with a stylish look and nice sharp shapes, perfect for multiple types of incisive designs like logos, posters and more. This typeface includes uppercase, lowercase, and special glyphs, besides the usual numerical characters. It is a free font.

      • Nickainley: Monoline Cursive Script Font

        Nickainley is a monoline script handwritten font perfect for classical and vintage purposes. It includes uppercase, lowercase and special characters, and numbers. You can use it in logos, cards, t-shirts, letterhead, labels, posters and badges. You can use it personally and commercially.

      • Maxwell: Rounded Edges Typeface

        A beautiful rounded edge typeface created as uppercase and lowercase. This font includes numbers and some special characters, complemented by three different variations. It fits logos and headlines perfectly. This package comes with an OTF file and it's totally free.

      • Arkhip: Old USSR-inspired Typography

        A cool font inspired by the old USSR typography. It has been made as uppercase only, but it includes the regular Latin characters as well as Cyrillic, numbers and special characters. Arkhip can be used in any purpose, and it was created by a team of 7 people.

      • Erster Caps: Fancy Serif Typeface

        A beautiful set of all-caps typeface, perfect for printed design projects like pamphlets, posters and more. This is a serif font that can also be used for headlining and it is free to be used in any way.

      • Nordic: Norwegian Rune-inspired Free Font

        Nordic is a cool experimental font inspired by Norwegian runes. This font is only uppercase, and it includes numerals and basic punctuation marks. It also supports languages as Catalan, Danish, Dutch, English, Estonian, Finnish, Italian, Latvian, Norwegian, Polish, Spanish. This font is totally free.

      • Serendipity: Free Soft Script Font

        Serendipity is a free and soft cursive typeface. You can use it for any purpose whether it is commercial and personal, in any type of printed and digital design. It works perfectly on posters, cards and others, although it doesn't work so web on web environments (unless you use it as headlines). It was created by Maroon Baboon.

      • KINO 40: Old-style Cinema Font

        Kino 40 is a typeface inspired by old cinema handwrite styles; the font includes uppercase, lowercase, numbers and lots of especial characters. It can be used for commercial and personal projects, mostly printed since its legibility would be a problem in web environments. It was created by Les 83 Machines.

      • Refuge: Handcrafted Vintage Font

        Refuge is a handcrafted font that can be used in any type fo design, especially a vintage poster or website. It can be used in lettering, logos, t-shirts and other printed designs. It is free for personal and commercial purposes. The font was created by Grant Beaudry.

      • Perfograma: Perfored Sans-serif Font

        A sans-serif font made entirely with perforations, perfect for printed creations and also web, although it works nice for headlines. This font was inspired by those old computer machines that used punched cards to operate, making it look really nice in vintage posters. This font was created by Asen Petrov.

      • Motorless: Old 3-styled Font

        A font with three styles, inspired by old style clunkers, oil and dirt. Its styles are default, drilled and hammered. It includes uppercase, lowercase, special glyphs and numbers. It also includes nice ligatures, swashes and catchwords. It was created by Fabien Laborie.

      • Oldways: Retro Vintage Free Font

        A retro font that mixes old western styling with contemporary artistic shapes. It can be used in logos, branding and posters, but not that much in web design or apps, unless it gets used in headlines or big, big short text. It comes in regular and italic, and it can be used both for personal or commercial projects.

      • Kontanter: Experimental Monospace Display Fon...

        Kontanter is a nice experiment for a monospace display font. This font includes uppercase, lowercase, numbers, special characters and other important glyphs. It is free to download and implement in any printed or web design, created by Kash Singh.

      • Timber: Free Inline Font

        Timber is a nice inline font perfect for posters and advertising. It is composed of various slices per font with sharp edges, making it a unique creation. It has uppercase and lowercase characters, and numbers, but it doesn't include special characters. The font was created by Mehmet Reha Tugcu.

      • Tentmaker: Sharp Uppercase Typeface

        A simple and different typeface with sharp edges. It includes only uppercase fonts, no numbers, no special characters. It can be used in many designs, but it suits posters and printed design in general perfectly. This font was created by Johnny Kunda.

      • SUNN: Free Handwriting Font

        SUNN is a compelling font perfect for funny web environments or printed designs. It includes only uppercase characters, numbers, lots of special glyphs and more. The font can be used in any kind of project for free and it was created by Gatis Vilaks and krisjanis mezulis.

      • Bulgary Script: Surreal Handwritten Font

        Bulgary Script is a font that combines brush lettering with traditional handwriting. You can use it in many ways, like printed or web design, and it includes 289 glyphs in total. among its features it has ligatures, contextual alternates, stylistic alternates, and stylistic sets. It was created by Aritro Das.

      • Delicate: Stylish Free Typeface

        A stylish typeface great for graphic design like posters, banners and other printed stuff, although a difficult font for web readability. The font includes uppercase and lowercase characters, numbers, and some additional glyphs. The font is free to download and it is a nice creation by FAAK&PAAT Studio.

      • Marske: Free Stencil Font

        Marske is a nice typeface resembling those old calculators, with a modern touch. It is an uppercase only font and it includes numbers. This font is free to download and use for personal and commercial purposes! It was created by Kash Singh.

      • Anders: Free Sharp Font

        As a nice and minimal creation, Anders is a free and stylish font that can be used in any sort of project, whether it is web, mobile or printed. The font includes uppercase characters only, and it was created as an experiment by Tom Anders Watkins. You can use it personally and commercially.

      • Skinny Bastard Free Handwritten Font

        Skinny bastard is a beautiful handwritten font. It is a nice creation with uppercase only, numbers and some special​ characters​. The outlined design of this font is perfect for using alongside photography backgrounds. This font was created by Free Goodies for Designers and was made free for personal and commercial purposes.

      • Barque: Free Stylish Typeface

        Barque is a free stylish typeface made with a cool sharp style that makes it resemble Japanese characters. The font is not that legible, and your eyes have to struggle a bit to catch the message, making it a good font for posters and other big printed design and a short message. The font includes uppercase, numbers and two styles: Regular and Inline.

      • Cosmo Path: Free Electric Typeface

        Cosmo Path is a typeface with a very light and edgy style. The font is complemented with arrows in all the directions, which makes it a cool font to illustrate matters related to energy, although it is not as readable as one might expect. It can be used in sci-fi posters and related stationery design. It was inspired by spaceship, cubicles and triangle patterns, and you can use it for personal and commercial projects. The type was created by Filiz Sahin.

      • Pirou: Free Stylish Font

        Pirou is a font that was born as an experiment inspired by Didot. It has over 300 character among which you can find: lowercase and uppercase characters, symbols and glyphs, accents and ligatures. It is a beautiful font that can be used in several types of design, like stationery, posters, general printed design and digital artwork, including web. The font was made by Quentin Grébeude and he made it available for free in Behance.

      • Azedo: Free Elegant Font

        The Azedo font is a compelling creation for web and printed projects. It comes in 2 different font sizes: bold and light, and it only has uppercase characters, which makes it great for headlines and small phrases in posters and flyers. Its creator, Pedro Azedo, made it available for free, although you can donate to appreciate his work.

      • Sketch Rockwell Grunge Font

        A nice handwritten font. Includes uppercase and lowercase variations, perfect for headlines and all kinds of web texts. It includes special characters and numbers as well so your designs don't look incomplete. This font was created by Artill Fonts and can be downloaded for free.

      • Reis: Free Handwritten Font

        Reis is a free font with a handwritten style. It is a beautiful creation by graphic designer Marcelo Reis Melo. It can be used in any project and be adapted so it can fit any design. This font has been created as uppercase only, which makes it perfect for headlines, and includes numbers and other special characters.

      • Polya: Mesh Uppercase Font

        The Polya free font is a compelling creation with a mesh style. It only includes uppercase characters and numbers; it doesn't have special glyphs. The font is perfect for poster design and its free to download. It can be used in personal and commercial projects. This font was created by Adrien Coquet.

      • Fold: Angular Free Font

        Fold is a very unusual font created by Isaac Taracks from Behance. It aims at people who don't care about sacrificing a bit of legibility in order to get a good looking title or heading in their design. A pixel-like appearance is the font's primary attribute, making it stand out from the rest.

      • Docker Free Font

        Docker is a free font that allows you the creation of cool headlines and logos thanks to the shape of its glyphs. It is an uppercase sans-serif font with three styles: Regular, Inline and Pseudo 3D; mixing them all gives you an excellent result you can use as a logo. Within you can find basic latin and cyrillic glyphs, numbers and other relevant symbols. This font is free for personal and commercial uses, and was created by Slava Krivonosov.

      • Looque: Quirky Free Font

        Here we have a decorative font that includes linear patterns, circular edges and angular glyphs. Its purpose is merely decorative since the intention of the typeface is that it isn't legible in lengthy descriptions. The edges of the font and its configuration can be match with each other to create beautiful compositions. This font was created by Masterfulmd and can be downloaded for free.

      • Nexa Rust: Grunge Free Font

        Nexa Rust is a font that contains sub-families, including Sans, Slab, Script, Handmade and others. One of its advantages is that each one contains different font weights, and their feelings are diverse, making it a font for multiple uses. It was designed by Radomir Tinkov, Svetoslav Simov, Ani Petrova and Vasil Stanev from Fontfabric. You can download it for commercial and personal projects.

      • Scratch: Sans Serif Display Typeface

        Scratch is a display typeface that comes in Basic and Detail versions. It is uppercase only, and its particular use is for titles and headlines. The inspiration comes from previous fonts Gotham and Sans-Serif. It is strong and includes characters for english and spanish languages. The "A" and "Q" are the glyphs that stand out among the rest thanks to their tails, and they give a fun touch to an overall static typeface. Also, the break lines added make it a cool addition for decorative purposes. The typeface includes especial characters and numbers, is free to download and was created by Luis …

      • Phlekzi: Sharp Futuristic Typeface

        A display font designed by Phenom, which has a beautiful set of accents and symbols. It is a futuristic and squared font, making it perfect for movie posters and other printed design related to the future. Its format is TTF.

      • Mayangsari Font

        ​Mayangsari is an excellent display typeface designed by artist Muhammad Rizky Ariesto. This font includes a great set of accents and symbols, which make them look like Japanese roots typography, resembling old style oriental ambiance.

      • OKO: Futuristic Print Font

        Oko is a display geometric typeface designed by the young artist Hugo Portinha. This font includes a beautiful set of accents and symbols, which make them look like something an alien would use, very futuristic and such. The download is free for personal use only.

      • Accent 

        It is a display font designed by Nelson Balaban. Thiny, formal and perfect suitable for fashion's magazines. This font is luxury, creative and unique font. Free for personal work. If you going to use this font for commercial work contacts its owner.

      • Adamas Regular

        Adamas was firs used by Greek and latin writers for a stone if impenetrable hardness. Original and geometrical type style which could be used as designer to create logos or branding. Free font for commercial and personal work.

      • Piedra: Rocky-styled Font

        Piedra is the rocky, fear-inducing face of galvanized triceps and überchiseled jawlines. It is a bit distorted and has wide stroke which calls visual attention. The license for this font is the SIL open font version 1.1.

      • Akronim: Original Brush-like Typeface

        Akronim is a brand-new, original, brush-like, stylish font with a Western and Central European (e.g. Polish, Croatian, Czech, Magyar etc.) Latin character set. It was handmade in Poland by Grzegorz Klimczewski. The font has a SIL open font license version 1.1.

      • AGE: Futuristic Bold Typeface

        Age font can be used to logos, websites and header. It does not has serif and it characterised to be fat and hard typo. Free font to use for only personal work, If you're going to used for commercial work contact to its owner.

      • VAL: Bold Puffy Typeface

        VAL font is applicable for any type of graphic design – web, print, motion graphics, etc, and perfect for t-shirts and other items like logos, pictograms. Format: Opentype (.otf). Free font for commercial and personal work.

      • Johanna: Modular Display Font

        Johanna is a modular display font, geometrically-built half texture and half calligraphic; you should get the best readability at medium sizes or augmenting tracking. Available in regular and italic styles, containing uppercase and lowercase, numbers, punctuation marks, special characters and accented glyphs. Free for personal and commercial use, and feel free to donate as well.

      • Razor: 80s-inspired Display Typeface

        Razor is a display typeface inspired by the eighties. The thin multi-lined characters get the best result when used in bigger sizes and a static version of Razor is available as Regular Bold Italic. There’s also an animated version that consists of 39 glyphs in a single weight upper case (two are alternate forms of the A and O typing the lowercase letters) and numerals. Free for personal use only, the commercial license costs €10.

      • LOT: Geometric Block-like Font

        A geometric block-like font, being all-caps, is pure display material, great for logos, posters and such pieces. It only includes uppercase characters, and numbers, no special characters. It is free for personal and commercial use.

      • Gota: Geometric Display Font

        Gota is a geometric display font, rounded and extra heavy, without a real lowercase, but a mixed-case with the same height standing for it. Available in the heavy regular and light weights, for free personal and commercial use.

      • Cinzel Decorative: First Century Roman Typef...

        Cinzel is a typeface inspired in first-century roman inscriptions and it's based on classical proportions. However it’s not a simple revivalism since it conveys all the ancient history of the latin alphabet. It also merges a contemporary feel onto it. The font has a SIL open font version 1.1.

      • Lino Stamp: Geometrical & San-serif Type...

        Lino Stamp is a geometrical, san-serif typeface. To produce it, letters were carved into linoleum, inked and impressed on paper giving a worn and distressed finish. Lino Stamps works well on heading, short paragraph and scrapbook-style designs. Free font for personal and commercial work.

      • Caesar Dressing: Antique Stylish Typeface

        Caesar Dressing is a 'Markers' take on a Greek alphabet. Open Window fonts gravitate towards more experimental or spontaneous renderings and this one doesn't look out of place next to the most experimental of those. It also maintains the geometric balance of a classic Greek-font quite effectively. This font has an SIL Open Font License, 1.1.

      • Stiff Staff

        A very creative font coming to us from Font Fabric, combining sharp lines and corners with an edgy touch of italics, resulting in a memorable logo design. It lends itself to smaller block of texts, but it really is a fantastic modern type. Free to use for both commercial and personal use.

      • Contrail One: Sharpened Futuristic Typeface

        A somewhat futuristic font inspired by handmade sans letters originated in UK posters. Rounded corners give it an attractive a friendly touch. Specifically designed to be used as Web type in medium and large sizes. The font is not really heavy, so it won't affect page load; it is a TTF file and it has a SIL Open Font License, version 1.1.

      • Metropolis: Industrial Double Line Typeface

        Metropolis 1920 comes from the industrial movement of the 1920′s where skyscrapers were born. Using a double line technique, the result is a bold, bumptious typeface with a calm disposition. It is a cool font, free for personal or commercial use.

      • Sullivan: Three Variations Bold Display Font

        Sullivan is a bold display font face that comes in three variations. Each can be used efficiently on their own or layered for a uniquely modern, industrial effect. This is a free font for commercial and personal designs.

      • Ranger: Weighty Italic Display Face

        Ranger is a weighty italic display face comes custom fit with the spurs; it suits on vintage posters or comic advertising perfectly. The font is free only for personal purposes.

      • Aldine Expanded: 19th-century American Wood ...

        Created from original proofs of a 19th-century American wood type alphabet, Aldine Expanded was made and embellished by Javier Viramontes, it stands out as an all-caps heavy slab serif. Another font is included: Aldine Tuscan, an ultra light slab serif font. The font can be used for commercial and personal design.

      • Medula One: Headlines Organic & Modern F...

        Medula One brings the best of both worlds by combining the old and the new, the organic and the modern in order to display straightforward display work, useful for titles and headlines. This font can be used for free, personally or commercially.

      • Faster One Sans-serif Font

        Faster One was developed from a sans serif italics. In order to create an impression of velocity, the horizontal and gradual lines generate the idea of the image of the wind. Ideal for writing headlines where efficiency and speed are priorities. This font is licensed under the SIL OPEN FONT LICENSE, version 1.1.

      • Baumans: Bauhaus Inspired Typeface

        Inspired by Bauhaus typefaces and preconstructivist forms, Baumans provides a classic look implementing neat modern elements as well. Its main features include sharp corners in MVW, curved Z and unicase-like N while keeping contrast and balanced proportions. It has an SIL Open Font License, 1.1.

      • Mathlete: Uppercase Hand Drawn Font

        A font that isn't exactly a small caps one but an all-caps, since the lowercase letters display a cleaner variation of the uppercase glyphs, thus giving a wider range of possibilities for display texts. You’re free to use this in commercial & personal work.

      • FFF Tusj: Serif Hand Drawn Typeface

        A hand drawn version of the Georgia font made in TTF format, hinting even its design structure, for that reason it looks better in bigger display sizes. It is free for both personal and commercial use. This font can be used in cartoons, kids' stories and other children-related creations.

      • Jenna Sue: Dynamic Handwritten Font

        A very dynamic handwritten font with fast strokes and narrow angles. There is a TTF file in the download, but at the source page you can get your hands on a full package of font formats for use as a web font, as well as subsetting. It is 100% free for personal or commercial use, you don't even have to ask permission.

      • Ventography: Italic handwriting Font

        Ventography is an italic handwriting font with a brush pen calligraphic look, with perfect height alignment, and stroke weight consistency; available just for personal use and requires a license for commercial use. The font comes as TTF.

      • Sue Ellen Fancisco: Tall & Skinny Font

        Sue Ellen Francisco is a tall, skinny font based on the designer’s own handwriting, it has a very low x-height and long ascenders and descenders, so in text lines they are prone to clash. It was created in Adobe Illustrator, using a Wacom tablet. It has an SIL open font license version 1.1.

      • Ruge Boogie: Funky & Playful Typeface

        Ruge Boogie is a fun, funky, bouncy and playful typeface. This font can be used for childish books or for invitations for kid’s party invitations. The Ruge font has an SIL open font license version 1.1.

      • Permanent Marker: Educational Creative Font

        Permanent Marker is an irregular handwriting and spontaneously fun font that can be used for informal assignments. It is perfect for creative works for children, or with educational purposes. The font has an Apache license, version 2.0 and it comes as TTF.

      • Bigelow Rules: Eclectic & Funny Hybrid F...

        Bigelow Rules is an eclectic and funny hybrid font inspired among others, from Times New Roman and Didone. It has an SIL Open Font License, 1.1

      • Mountains of Christmas: Handwritten Cartoon F...

        Mountains of Christmas is a casual, quirky and playful serif font; great mostly for display and a warm touch for a personal letter and cartoons or children's books. This font is available under the Apache License Version 2.0, available on Google Fonts. It weighs quite a bit, so it's possible that it affects page load.

      • Montez

        Montezuma is a script font which draws inspiration from 1960s beauty product ads. Its sweeping strokes lend to a feel of joy and elegance, making it ideal for display uses that require a little drama, “joie de vivre” or Joy of Life. Best settings are at medium to large text sizes for optimal readability. Apache License - Version 2.0

      • Just Another Hand: Narrow Handwriting Typefac...

        Just Another Hand is a narrow brush-drawn handwriting font inspired by the designer's own high school handwriting. It doesn't display very good at smaller sizes, but it's perfect for books with big fonts (like children books) and poster designs. The font comes in TTF and it's licensed under the SIL open font license version 1.1.

      • Gochi Hand

        Gochi Hand is a typographic interpretation of a  teenage girl’s handwriting, The text line is spontaneous, solid, consistent and works well on screen, even in small sizes, as well as in print.  SIL OPEN FONT LICENSE Version 1.1

      • Fredericka the Great: Nice Cartoon-like Typef...

        Fredericka the Great is a scratched render of a modern serif typeface, mixing the elegance of the serifs with the sense of informality from the handmade look. Supports the Latin script block, including punctuation marks, numbers and accented characters. It's license is SIL open font, version 1.1.

      • Finger Paint

        Finger Paint font was made as an experiment with Illustrator’s brushes and ended up becoming a full functional font within an hour. SIL OPEN FONT LICENSE Version 1.1

      • Berkshire Swash: Elegant Femenine Typeface

        A delicate font with a slightly feminine touch to it that serves it quite well, despite the bold styling. It also reminisces of old font faces, proper of previous centuries, for a classic and elegant design. It was designed by Astigmatic and it comes in TTF format.

      • Amatic SC: Small Caps Hand Drawn Web font

        Amatic SC (Small Caps) is a simple and effective hand drawn web font, it can be used for titling and small runs of text. It has been designed to be used freely across the internet by desktop computers, laptops and mobile devices. It has an SIL open font license version 1.1.

      • Contribute: Handwritten Script Font

        Contribute is a handwritten script font with a casual appeal. The free version includes uppercase and lowercase letters only. You can use the font just in your personal projects and it comes as a TTF file.

      • Playball: Smooth Cursive Font

        An attractive font with a smooth flow, originally intended for sporting events or festive situations, but you can definitely use it for headers, posters or titles in general given its fancy looks. The font has uppercase, lowercase, numbers and special characters, it is a simple and lightweight TTF file, and it has a SIL Open Font License, 1.1.

      • Pacifico: Creative Handwriting Font

        A creative brush script handwriting font created by Vernon Adams and made available for free as a TTF, coming from the surf culture developed during the 1950 in North America. A fun and uncomplicated design for titles and headers. The font is intended to be used in web, including uppercase, lowercase, numerical and special characters.

      • Nixie One: Thin Typewriter Font

        A font that is one of those mixes that are bound to end up awfully, but all of a sudden resulted in a great idea. Nixie One combines neon tubes and a typewriter for a delicate and thin design. This font includes a complete latin character set, free to be used in any kind or online or printed projects.

      • Lobster Two: Polished Curly Font Face

        The extended family of the of the well-known typeface Lobster, comes with the characteristic swashes and connections between letters in a TTF file. The previous Lobster font is featured now as the italic bold form of this font face, with a considerable drawback: the Cyrillic script is supported in the original Lobster, but not on Lobster Two. Once again it comes to us under an SIL Open Font License 1.1.

      • Josefin Sans: Elegant Sans-serif Typeface

        A geometric and elegant sans-serif typeface with a distinguishing x-height measuring half of the cap height, in both roman and italic, offering five weights; it contains the most familiar glyphs from the Latin script, including numbers and special characters. A serif brother is also available.

      • Matilde: Thin Extra Tall Capitals Typeface

        Matilde is a friendly thin typeface with extra tall capitals, elegant look combined with decorative elements. The typeface will work well for headings, short paragraphs, magazines, children books, posters, logos and any type of graphic design. Available in two styles – normal and sketch. Inside the font you’ll find a collection of decorative frames and patterns. It is licensed as freeware.

      • Emilys Candy: Girly Semi-sharp Typeface

        A font with a certainly regular character weight but set in a slightly whimsical manner, with playful swirly serifs and heart-dotted i's. All the basic and supplementary latin characters are included. The font has an SIL Open Font License 1.1 and it's available as a

      • Skinny Drip

        Ultra light font dripping, that has the uppercase and lowercase letters, numbers and special characters. Free for personal and commercial use.

      • Bubbles

        Bubble cloud rendering of the capital letters and the numbers. Free for personal use; for commercial use, donation of any amount is accepted.

      • Damion: 20th Century-inspired Script Font

        Damion is a casual script font derived from casual typefaces brought to America in the 20th century. Best suited for display texts but with good legibility in small sizes because of its thickness. Includes accented letters to support other languages, as well as special characters, uppercase, lowercase and numbers.

      • Impregnable: Beautiful Multipurpose Script Fo...

        Impregnable is a script font for personal use only with good legibility in small sizes. The font includes uppercase, lowercase, accented letters, numbers and also special characters. It comes in TTF format and it's free.

      • Engagement: Semi-formal Brush Script Font

        Engagement is a semi-formal brush script best suited for medium to large sizes. Ideal for invitation cards, book covers and similar. It includes uppercase, lowercase, accented letters, special characters and numbers. Its license is the SIL Open Font version 1.1.

      • Aguafina: Graceful & Artistic Calligraph...

        Aguafina is a graceful but not too casual and artistic semi-formal calligraphy font in which the characters flow into each other. Also, the narrow lowercase allows for efficient use of space, while the long ascenders and descenders help maintain the legibility. The font is best suited for book covers, products packaging and similar. It includes uppercase, lowercase and accented letters, special characters and numbers.

      • Diskopia: All-caps Retro Stencil Font

        Diskopia is an all-caps retro stencil font that reminds of the 80's decade. it includes numbers and special characters. The Diskopia font can be used both personally and commercially, and you can download it for free.

      • Appleton: Victorian Style Tattoo Font

        Appleton is a victorian style font based on the labels placed on fruit crates in the end of 19th century. It is a demo font for personal use only and it is limited to a few letters in its free version.

      • Angel Tears: Handwritten Sketched Semi-script...

        Angel tears is a handwritten sketched semi-script font for personal use only in its free version. Best suited for small to medium sizes, it includes uppercase and lowercase letters.

      • Art Brewery: Free Brush Style Font

        Art brewery is a brush style font free for personal use only. Includes uppercase and lowercase alphabet and basic special characters. It is best suited for medium and long texts.

      • Feathergraphy: Handwritten Script Typeface

        Feathergraphy is a handwritten script font for personal use only. Best suited for tattoo, but versatile enough to be used in wedding material, and graffiti artwork. Includes Uppercase and lowercase alphabet and some basic special characters. It was created by Måns Grebäck.

      • Qwigley: Compelling Squiggly Font

        Qwigley is an award winning Brush Script. It is a beautiful contemporary design with stylized appearance; includes uppercase and lowercase alphabet versions, numbers, special characters, and a list of accented letters. It has an SIL open font license version 1.1.

      • Great Vibes: Extended Alphabet Script Font

        Great Vibes is a script font in one style including an extended alphabet uppercase, lowercase letters, numbers and special characters. The font is a Unicode typeface that supports languages that use the Latin script and its variants, and could be expanded to support other scripts.

      • Archive: Strong Geometric-shaped Free Font

        A free font designed by Slava Kirilenko for Fontfabric, Archive is made out of strong geometric shapes, and it can be used in all sorts of projects —web, print, digital media, mobile, etc.—. It has characters in greek, created by George Triantafyllakos, and is a bold font by nature, making it perfect for posters, flyers and all sorts of advertising options.

      • Collapse Expand List View all items Download Bundle Submit
    • CSS Menus (81 submissions)

      A complete catalog of partial or totally CSS-based menu experiments with radically diverse styles and functions.

      • CSS and JavaScript Radial Menu

        A simple yet complete menu with a radial effect made in CSS and JavaScript. This is a cool effect that can easily be styled and integrated into any web or mobile project. Within, social icons can be included, as well as other types of icons. The code is free and editable.

      • CSS3 3D FlyOut NavBar

        A navigation made with pure CSS3 that creates a flyout navbar with 3D transforms. It is a simple creation that can be included easily into any website, and can be styled easily as well. The navigation was created by Tiffany Rayside.

      • CSS and jQuery Navigation Reveal Effect

        A nice CSS and jQuery effect for a navigation menu. It works by revealing a simple text menu once the button is clicked, putting apart the whole content window. The menu can integrate images if you need them, and the velocity can be modified at will. This snippet is free and was made by Codepen user ZCKVNS.

      • Responsive CSS Navigation Menu Ideas

        A set of CSS effects for navigation. All of them are responsive, consisting of off-canvas menus. The menus appear differently, and you can adapt the one you like to your project for free. Created by Andrzej Dubiel.

      • One-page CSS Navigation Menu

        A simple code snippet in CSS for creating a one-page menu. The snippet uses very little CSS and no JavaScript, and It can be used commercially or personally, as long as you provide proper attribution. It was created by Alberto Hartzet.

      • Vertical CSS and JavaScript Navigation Layout

        A nice navigation layout displaying a simple menu icon. Once clicked, a side menu with colorful icons appears. The layout also has some effects for screen transition. It was made with CSS and JavaScript by Codepen user Ettrics.

      • Fully Responsive CSS3 Menu

        A compelling responsive menu made in CSS only. It has a profile pic on top, and some links for dashboard, customers, users and setting. The icons were taken from Entypo, and the avatar was taken from UIfaces. This menu can be used for free, modified and it was created by Claudio Holanda.

      • Open Close CSS Animated Menu

        A responsive menu for mobile apps and ever for web purposes made in CSS. It includes several different icons and colors, giving it the appearance of a Metro interface with some effects and animations. This snippet was created by Vineeth.TR.

      • CSS3 Circular Weather Menu

        A simple circular menu made in pure CSS3 for a weather app or related. It is a colorful snippet, that activates on click and shows different icons indicating weather conditions. It can be modified and it was created by Moreno Di Domenico.

      • Off-canvas CSS & JavaScript Menu

        An off-canvas menu with effects on click and hover made with CSS and JavaScript. When clicked on the menu button it displays the effect on links, and when you hover a link it darkens a bit. This snippet can be implemented in any project.

      • Pure CSS Dropdown Menu

        A simple flat menu with smooth effects made in CSS format. It follows the mouse when you hover over one item, and it displays a submenu. The animations were carefully crafted with CSS and it can be implemented on any website. This was created by Codepen's user Robert.

      • Pushy: Off-Canvas Navigation Menu

        Pushy is a simple off-canvas menu created using CSS transforms and transitions. It has a smooth performance when used on mobile devices, includes fallback animations for IE 7 to 9, if a link is selected the menu closes automatically, it is responsive and has collapsible submenus. It was made by Christopher Yee.

      • Minimalistic Flat CSS Navigation

        A flat navigation made in CSS and JavaScript showing some tabs and a drop-down menu. It can be used in any website, matching its style. It was created by Andy Tran.

      • Mobile App CSS Sliding Menu

        An actionable menu for mobile apps that appears when hovered over made with CSS. The menu that appears has a beautiful background which can be dynamic according to the images the user uploads, and the menu slides from left to right smoothly. It was created by Virgil Pana.

      • Material Design CSS App Menu

        A compelling menu for mobile apps made in CSS and JavaScript. It shows a simple feed interface with a menu button. Once clicked, the menu appears as a white circle covering the whole screen, displaying the menu. This snippet is nice, although it can be a little smoother in its movements; it was created by Virgil Pana.

      • Slideout.js: JavaScript Touch Slideout Naviga...

        A sliding touch navigation menu for mobile apps or even web projects. It is a dependency-free, simple markup, native scrolling, easy customization, CSS transforms & transitions, and it weighs just 4 Kb. This menu was created by Mango.

      • Colorful CSS Explosive Menu

        A menu made in CSS inspired by the Material Design trend. It is a colorful creation, containing icons within boxes that come to life when the user activates the menu. It also make some particles flow around the canvas, and then gathering them back when the user closes the menu. This snippet was created by Harris Carney.

      • CSS & JS Radial Pop-Out Navigation

        A compelling menu for apps and websites made in CSS and JavaScript. It consists of simple circles with icons inside for the action you need. You can adapt it on your designs easily and use it freely. It was created by Dudley Storey.

      • Material Design CSS Off-canvas Menu Transitio...

        A beautiful transition made in CSS for an off-canvas menu implementing the guidelines of Material Design. It shows a little plus sign comprised within a circle and when you click it, it displays the full box with text, images or whatever you want to show. This snippet was created by Jeff McCarthy.

      • Material Design CSS Gooey Menu

        A cool material design Menu made with CSS. It appears progressively resembling goo. The element is still in version 1 so it is not quite good and the animations look a bit forced. However, you can smooth it yourself. It was created by Lucas Bebber.

      • CSS & SVG Material Design Gooey Menu

        A gooey menu created in CSS and SVG following the Material Design guidelines. It is one of four styles of gooey menus which have similar animations. However, this circular effect makes this a bit more relevant since it can be used not only on websites but in mobile apps as well.

      • CSS & jQuery 3D Rotating Navigation

        A CSS and jQuery navigation that looks like a 3D effect when it appears. It is complemented with beautiful typography and outlined icons for major impact. It uses CSS transforms and transitions to make it smooth and neat. It can be used freely.

      • Stretchable CSS Interaction Menu

        A simple interaction menu for apps that can be stretched to reveal the menu elements created with CSS and JavaScript. It reveals the menu items organized in a list, created especially for mobile devices, although it can be adapted to desktop versions of websites. It is free and it was created by Codepen user Fabrizio Bianchi.

      • Pure CSS Off-canvas Menu

        A notable code snippet for an off-canvas menu with flexbox created with pure CSS. It uses flexbox to control the layout and to resize the content area when the menu gets visible. Instead of overflowing the viewport and getting cut off on the right side. This snippet doesn't use JavaScript at all but uses The Checkbox Hack, appeared in CSS Tricks instead. This pen was created by Zoe Gillenwater and uploaded to Codepen.

      • CSS Off-Canvas Menu Effects

        A compelling set of effects for off-canvas menus. It uses different layouts and transitions, making the overall page look awesome and coordinated, making space for actionable items in the menu and controls. These effects were made using CSS transitions, CSS animations made with bounce.js, and animated SVGs using Snap.svg. Additionally, the font icons used were from Font Awesome and the random users from Random User Generator. The menu effects are: - Top side - Side slide - Corner box - Nested corner box - Top expand - Corner morph - elastic - Bubble - Wave This tutorial + code snippet was created by Mary Lou from Codrops.

      • CSS Rollover Menu States & Effects

        A set of rollover states entirely created in CSS. They are composed of triangular menus that activate different effects when hovered over. It includes logo reveal, grow regular and opposite, rotate right and left, and grow rotate. This code snippet was created by Andy Fought, who uploaded to Codepen.

      • Flat CSS Menu Toggle Button

        Inspired by Loredonut’s Pen from Codepen (a simple unicolor menu), this is a beautiful menu with CSS animations, for the button to activate and close, as well as the actual items in the list. Elements have rounded corners, unlike the original, and the effects were made based on Todd Motto functions. Geoffrey Crofte made this development and uploaded it to Codepen.

      • CSS3 Funny Menu

        An excellent CSS menu created by Wagner Moschini with the appearance of stacked boxes. We can include it into our websites to make them more beautiful and striking, making it the main menu of a website, with the idea to drive users' attention to it.

      • CSS3 Responsive Navigation Menu

        A responsive menu that includes dropdowns on the design, created with pure CSS3. The elements on the menu are intended to resemble those on the periodic table. This menu was made and also uploaded to CodePen by the user Jeremy Cloutier.

      • CSS Sliding Menu Tiles

        A centered group of colorful icons with smooth slide animations made in CSS. It features mouseover effects for big screens and focus effects for smaller devices. As a fun little detail, an extra menu can be seen after entering the famous Konami code.

      • Black Neon CSS Navigation Menu

        A very appealing CSS menu uploaded to CodePen by the talented Sara Soueidan. Showcasing a sober, elegant look, this menu highlights hovered options with a fancy neon-like effect that lights up the icons. When pressing on the buttons, they display a delightful shadow effect, too.

      • CSS Sliding Panel Menu

        Jeremy T has developed this good-looking slide out menu based on the jPanelMenu plugin. The idea behind this is pretty simple: We place a button on the upper corner of the screen that when clicked, triggers an animation that slides out a menu. The rest of the page moves and adjusts its content to fit in the screen.

      • CSS Swinging Panel Menu

        An attractive menu developed with pure CSS. It features an impressive effect that makes panels "swing" in order to show the submenus when hovering, this is achieved by taking advantage of CSS keyframe animations. Uploaded to CodePen by Seth Abbott.

      • Responsive Black & Red CSS Navigation Me...

        A responsive menu adapts to different screen sizes by displaying its content in two ways: On big screens, it shows the icons along with the description of every element. On smaller displays, it only shows the main icons and reveals the descriptions on hover. Created by Sara Soueidan and uploaded to CodePen.

      • CSS Sliding Border Navigation Menu

        A navigation menu created by CodePen's Marcello Africano. Styled with bright colors, it highlights elements on hover with a bar at the bottom of the selection, making use of a super smooth animation. Everything you see in the demo is coded with CSS.

      • CSS Unwraping Menu Hover Effect

        An interesting menu that features a contracted piece of "paper" that expands on hover by using a neat transition. After this, it displays a set of icons that can be used by the reader. Created by Nate Cohen based on a Dribbble shot by Adis Hasanic.

      • Two-Level CSS Dropdown Navigation Menu

        A good-looking, flat drop-down menu created with HTML and CSS. It is responsive, meaning it will react and adjust its size on any type of screen and device. Its main advantage is represented by some great performance given its lack of animations and simple design.

      • Icons & Notifications CSS Profile Bar

        Johnius from CodePen has developed this gorgeous bar for profile management called "I'm on the flat diet" based on an original design by Robert Van Klinken and made in pure CSS. It matches pretty well with other websites given its simple and laid-back design. Also, the markup was made by Johnny Concent.

      • CSS Animated 3D Blocks Menu

        A fantastic 3D vertical menu with a sleek animation made in CSS. It is formed by a set of boxes that spin to the right on hover, this spin is not made without the wonderful 3D animation that makes it stand out, with the edges of the box clearly coming out of the design. Created by Joshua Hibbert from CSS Deck.

      • Rolling Navigation Menu with CSS

        This navigation menu is a remake of the one created by Sohtanaka, but with the difference that the original was made with jQuery, whereas this one is created with pure CSS, although the concept remains exactly the same. It features a nice animation when hovering over its options. Designed by CSS Deck user Taufik Nurrohman.

      • Animated CSS Leading Slats

        A project that takes advantage of a few CSS3 properties to make animated “slats” that roll down to appear, creating a really nice effect. The slats receive a 3D transform effect in order to look the way they do while animation and keyframe properties are also applied. Remember this tool only works in Chrome, Firefox and Safari.

      • CSS Sliding Navigation

        A concept that enables multi-level navigation through a sliding animation, made in CSS. This allows the exploration of unlimited amounts of options within the same space, at the expense of some speed, since a click is needed each time the user wants to go back a screen.

      • CSS Social Profile Menu

        Kirill Zakharov provides a quick coded version of his own Dribbble shot. This stylish and clean menu provides some subtle, yet very satisfying shadow effects on hover along with some self-explanatory icons that reveal the menu's presence as a more social-oriented tool.

      • CSS Flip Menu Perspective

        A sleek menu by CSS Deck user José Barcelon-Godfrey. He provides a nicely designed menu with smooth hover animations that show a description of the option we are highlighting along with a pretty background picture. Webkit browsers are recommended in order to get the most out of this tool.

      • Vertical Animated CSS Navigation Menu

        A rather simple vertical menu inspired in Facebook’s mobile app. When hovering over an element on the list, a subtle animation moves the element to the right. This can be accomplished with the help of CSS3 and its transition property, which, unfortunately, is not yet supported on IE and Opera.

      • Responsive CSS TableView Menu

        A responsive menu made in CSS intended for displaying options in a clean and non-distractive manner. We can also include toggle options and a cool set of icons better suited for customization settings, but, as you know, you can always make a few tweaks to match your needs and style.

      • Slide Out CSS Mobile Menu Experiment

        A code snippet based on other pieces of work, it creates a nice menu with smooth transitions. It starts as a regular page with a button on the side; when clicking on this button, a lateral menu comes up, moving the entire page. It is a responsive design, so it can be used in handheld devices, as well.

      • Pure CSS3 Hover Vertical Menu

        A cool experiment generates a menu with a neat flat design and interesting animation effects. When hovered over, the items will perform a smooth transition as the corresponding icon spins around itself. Created by user Jitendra from CodePen using HTML and CSS.

      • Big Click: CSS Experimental Buttons

        A neat set of experimental buttons that expand when clicked, displaying a transparency effect. If the cursor is placed on top of the buttons, they will change slightly to signify they are being hovered on. Created by CodePen's Bennett Feely using CSS only.

      • Off-Canvas CSS Mobile Slide-Out Menu

        A CSS interaction that triggers an animation that will move the page to the side and introduce a set of options that will fade in one by one in a stylish manner. By using the :checked pseudo-element, we can design a mobile menu that slides out when clicking on the button placed on the top corner.

      • CSS Radial Menu Experiment

        A cool experiment that uses only CSS with their option for radial menus. Based on an older pen, this is a recreation of that original project. The menu starts at the top corner and, making use of a transition, it displays a set of selections on hover. It was uploaded by Codepen's user Anonasaurus Rex.

      • CSS Mobile Slide-In Menu

        A nicely styled menu that displays options after a well-worked slide animation that moves the whole page to the side. It is mostly intended to be used with mobiles, however, it produces a pleasant result in desktops. It is built with CSS (SASS) and a bit of jQuery.

      • Simple & Clean CSS Menu

        A simple and clean menu that applies a clever dynamic in the way it displays options to the user. First, they need to click on the desired selection and then, the rest will be displayed by just hovering over them. Created by John W. Long from CodePen.

      • CSS3 Circle Path Menu

        A beautifully styled CSS3 menu with animated circles. The idea is to have a big element floating around that releases smaller ones when we hover over it. While the process happens, the elements spin and move in an attractive manner thanks to the nicely applied transitions.

      • Circular Motion jQuery & CSS Effect

        A nice jQuery and CSS plugin made by Mary Lou from Codrops. It helps you create a menu formed by floating circles. One main element will display options that, when hovered, will have a smaller circle complementing the information. It is created using the jQuery.path plugin for the animations.

      • Responsive Minimalistic CSS Menu

        CodePen user usf has created this simple and stylish CSS menu with useful icons for profile and message managing. It is responsive, contracting and expanding the icon descriptions accordingly.

      • Creative CSS3 Animation Menus

        A truly impressive set of animated menus created with CSS3. We dispose of 10 examples with gorgeous transitions using blurs, slides, turns, zooms and more, applied either alone or in combination. If you want to have a good looking site with awesome menus, you won't find many choices better than this.

      • Animated CSS Feed Menu

        A menu is inspired by the Feedly app for iOS but includes some features and tweaks of its own. First, the options on the menu fade in one by one as the page loads, giving it a cool introduction. Second, the choices animate on hover, stretching a little bit to the right.

      • Flat CSS Mailbox Menu

        A rebound of a Dribbble shot by Rovane Durso, made with CSS and uploaded to CSSDeck by LukyVj. This menu features a minimalistic interface with a very pleasant color palette and a nice set of icons. Also, we get the possibility of displaying notifications, definitely a must for a mailbox interface.

      • Pure CSS Spin-Out UI Menu

        A very cool menu created in CSS by Billy Crist from CodePen. All you need to do is hover over the main menu icon, this will trigger a beautiful and smooth animation that displays all options available around the circle. Perfect for showcasing short or basic info in a tight space.

      • Animated CSS Ribbon Menu

        A terrific menu placed over a surprising CSS ribbon that comes loaded with awesome hover effects, making the ribbon bend itself, raising the menu element highlighted over the background through a wonderfully achieved 3D result. A slight color change is also included.

      • Minimal CSS Menu

        Aleks from CodePen brings us this beautiful menu with a flat, colorful design. A great feature it offers is the possibility to resize and drag the interface with the help of jQuery, although you have to activate that yourself in the demo to see it in all its glory.

      • CSS Lavalamp-Like Fancy Menu Effect

        An awesome CSS menu effect that resembles a sliding or "lavalamp" menus. We will go through three different examples with their own style and animations, everything (including the transitions) is created with only CSS3.

      • Horizontal CSS Drop-Down Menu

        A large drop-down menu inspired in the one found at Microsoft’s website. Useful for displaying vast amounts of options without draining all the space available. Also, it's possible to adjust the menu in order to use it with smaller screens and devices.

      • Vertical jQuery & CSS Scroll Menu

        A scrolling menu created with jQuery and CSS. The menu has a very long list of elements on a medium sized box, which scrolls up and down as we hover on the respective section, all done with supremely smooth movements.

      • CSS & jQuery Fixed Face-out Menu

        A fixed CSS and jQuery menu that will follow users as they scroll down the page, but fading out to the point where it is almost invisible. The menu will come back to its usual shape only when the reader hovers over it.

      • Responsive CSS Retina-Ready Menu

        An amazing menu that comes boosted with a number of very useful options that make it versatile and attractive. Is responsive design has three different layouts depending on the screen size, including a tablet-optimized version. Also, it is Retina-ready, this is achieved by using an icon font instead of images to avoid pixelation when zooming in.

      • Mailbox UI: CSS Flat Mailbox Menu Design

        A beautiful mailbox menu design created by Marco Biedermann from CSSDeck. It showcases a flat, simple design with highlighted notifications and an expandable “more” button, although it isn’t active in this demo. Moreover, there is a neat set of icons accompanying the interface.

      • Vertical CSS3 Drop-down Menu

        A vertical menu design with only HTML and CSS3. It includes some new CSS properties that might only be supported with the latest browsers, so keep that in mind when implementing it. Also, it features an attractive set of animations and multi-level navigation.

      • CSS Dark Navigation Menu Bar

        A neat navigation bar features a dark skin with colorful details on the bottom of each option. When clicking on the elements, they animate towards the background with a nice shadow that helps accentuate the effect. Designed with pure CSS by Thibaut.

      • Light Horizontal CSS Navigation 

        A light, yet strong CSS navigation menu with cool hover and active effects, as well as clean, white style that includes smooth shadows. Once we click on a button, it animates and stays pressed, just like the buttons in an old stereo player (do you young kids know what those were, anyway?).

      • Gorgeous Minimal CSS Menu

        A gorgeous CSS drop-down menu with loads of details that enhance its overall look to a high standard. It features a transparency for the background and the drop-down itself, a smooth animation to bring the lists when clicking on the main element and a cool highlight when hovering.

      • Simple Menu CSS Code Snippet

        A CSS code snippet example that features a simple menu. When you hover over or click one of the buttons, it shows different submenus. It is meant to be used as a drop-down bar for a mobile or regular website. You can edit the HTML to add more elements, the CSS to modify its appearance and the JS for improving the functionality.

      • Old CSS3 SmartPhone Menu

        A good-looking menu for smartphones or tablets made with CSS3. They can be used as little sidebars or widgets on your desktop websites. CSS3's box-shadow and linear gradient effects are the only ones used in this article, to very likeable results.

      • Simple CSS YouTube Menu Effect

        A stylish CSS menu inspired by the one seen on YouTube's left side. When clicking on the initial element, a fast, sharp animation marks the opening of a dropdown that displays all the options available. This example features a beautiful design with bright colors and attractive icons, that you might want to keep.

      • Responsive CSS Multi-Level Menu

        A responsive, multi-level, animated menu made with CSS that will allow us to display many options with an intelligent use of space, in any device. The great part about this menu is its ability to display the next level without growing larger, but just putting the current info on top of the previous one.

      • CSS Responsive Multi-Level Navigation

        A smooth and adaptable menu that will adapt to different screens and provide quick access to several levels of selections. It was created by Micah Godbolt and uploaded to CodePen.

      • Flat Colorful CSS Menu

        A colorful CSS menu design by Ryan Bishop that provides a pleasant view of options. Each option highlights with a slightly darker tone on hover, however, the effect is not as responsive as we'd like, in any case, when working at the right speed this tool is more than capable.

      • CSS Sidebar Navigation Concept

        A CSS menu that provides an elegant, smooth interface for your website. It is fully animated, displaying movement at every click or hover. The shadow effects found in every button accentuate the sober look it projects while staying dynamic, attractive and not boring at all.

      • Little Flat CSS Menu

        A simple menu made only with CSS. It features a very light design, including just what is needed inside. On hover, our selections are highlighted in light blue, which gives the menu some needed color, although, as you know, you can always grab the code and modify it at will.

      • Simple Elegant CSS Dropdown Menu

        A simple and clean design for a drop-down menu made in CSS that does not distract you too much, letting you focus on the important part: the content. Talking about focus, it applies :focus to allow the menu to be closed when clicking somewhere outside. Created by CodePen user Kasper Mikiewicz.

      • Collapse Expand List View all items Download Bundle Submit
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

Open bundle builder

Bundle Builder

0 elements selected | Clear all ×

Select the bundle you want to add the items to.

Search bundle (filter by name)
Create new bundle
×

Add new bundle

×

Edit bundle