(close intro)
    • Web Development Tools (84 submissions)

      Multiple purpose web development tools, ideal for improving daily workflow and adding extra functions to your projects.

      • Awesome Ruby Gems Collections

        A huge collection of ruby on rails gems classified by category and listed in GitHub by its author hothero.

      • Flarum: Modern Forum Software

        Flarum is a next-generation forum software that offers several UX features such as real-time discussions, moderation tools, touch optimization, and much more.

      • VueStrap: JavaScript-built Bootstrap Componen...

        VueStrap is a kit of Bootstrap components built with Vue.js completely independent of jQuery, bootstrap.js, or any other 3rd party plugin.

      • HTML5Sites: Curated HTML5 Sites Gallery

        A curated gallery that contains a collection of websites regarding HTML5. They are social ranked and allows submissions of new sites.

      • cssnano: A PostCSS-based Modular Minifier

        CSSnano is a modular minifier based on PostCSS plugins. It takes formatted CSS and optimizes it, ensuring that the final result is as small as possible for a production environment.

      • Bonsai: Freelancers Contracts Management

        Bonsai is an online web tool for freelancers to be able to generate secure contracts that feature eSignatures and integrated escrow.

      • Otto: Cloud Platform Web Development Environm...

        Otto is a cloud platform web development environment that allows you to control it with a single consistent workflow in order to maximize the development productivity.

      • GoTTY: Terminal As Web Application

        GoTTY is a simple command line tool that turns your Command Line Interface tools into web applications. This tool was developed by Iwasaki Yudai and is available as an open-source project.

      • CSSfmt: A CSS Formatting Tool

        CSSfmt is a tool that automatically formats CSS and SCSS source code. It can format Vanilla CSS, SCSS syntax, and nested selectors syntax like SCSS, Less, Stylus and processor using post CSS-nested.

      • CSS & JavaScript Web App Store

        Eager is an open source built web app store initiated by Adam Schwartz and Zack Bloom that allows you adding to your website several web apps in CSS and JavaScript only by indicating where you want it. Some of the most used apps are photo galleries, latest tweets section, add a comment section and fancy underliner.

      • Device Metrics: Devices Screen Sizes Online T...

        A nice collection made by Google with every device's metrics like screen size, the aspect ratio, width, height and pixel density. It's a great tool for designers and developers to know the dimensions of the most relevant devices. This is a public list that can be used freely.

      • Kirki: WordPress Websites Customizing Toolkit

        Kirki is a website customizing toolkit for WordPress. It extends the customizer functionality. It makes it easier for everyone to create beautiful and meaningful websites. It is licensed under the GNU General Public License.

      • Nuclide: Unified Web & App Development I...

        Nuclide is an open source IDE for React for creating native, web, and mobile apps, made as a suite of packages on that based on Atom to provide hackability and the increasing support. It provides auto-completion and inline error highlighting, a JavaScript type checker and more. It was made by Facebook.

      • Sublime Text 3 Material Design Theme

        A beautiful theme for Sublime Text 3 that has considerable improvements regarding functionality and also design. It brings the Material Design visual language into Sublime, being really easy to install. You can also change from dark to white and use visual cues to save time. It was created by Mattia Astorino.

      • Scut: Frontend Sass Utilities Pack

        Scut is a set of Sass utilities for improving the implementations of common style-code patterns. It takes away the pain of repeating code across a website; it makes things easy, helping you organizing your rules, and implementing best practices.

      • Vorlon.JS: JavaScript Debugging and Testing T...

        Vorlon is an open source, extensible, platform-agnostic tool for debugging and testing your JavaScript remotely. It was created with the help of node.js and It is easy to setup, you can set it up for multiple devices, and it is extensible. It was released under the MIT license.

      • xto6: Next-generation JavaScript Modernizer

        xto6 is a nice library made in JavaScript that keeps your JavaScript code clean and readable. Among its features, you can find function/prototype to class, string concatenation to template string and anonymous callbacks to arrow functions.

      • lightgl.js: WebGL Apps Prototyping JavaScript...

        A library to quickly prototype WebGL applications made in JavaScript. It re-implements OpenGL's modelview/projection matrix stack for similar functionality, making it perfect for creating cool 3D data showcases and visually appealing components.

      • CSS Dig: CSS Cheking Chrome Extension

        CSS Dig is an extension for Google Chrome that helps you analysing the CSS on your website. It shows you the CSS properties of your site, their frequency of use and variation. Also, it shows you the inconsistencies so the end user doesn't get confused.

      • Marx: Multipurpose CSS Stylesheet

        Marx is a CSS Stylesheet for developing simple web projects. It is not a framework, but a set of rules in CSS for easy styling. With it, all browsers render consistently thanks to Sanitize.css, was built with SASS, it's responsive and mobile friendly, has clean and beautiful photography and more features.

      • HTML Symbols, Entities and Codes

        A cool online collection of arrows and other symbols available as code. You can select among many types of arrows, and symbols like copyright, at, registered trademark and many more. After you're done, you can copy the Hex code, HTML ​or Unicode to use it on your projects.

      • Radium: Component Styling React Library

        Radium is a collection of tools for React elements' inline styles management. With it, you have powerful styling capabilities without needing to use CSS. It allows you to browse state styles to support and use media queries as well. It is a creation from Formidable Labs.

      • Browser Typeface Rendering JavaScript Engine

        Since fonts will look heavier on OS X and iOS than on other platforms, this useful JavaScript engine makes a specific typeface look nice in mobile devices, just as they look cool in desktop computers.

      • Predawn: Sublime and Atom Interface & Sy...

        Predawn is a set of styling features added to the Sublime code editor and also for Atom. The theme adds several improvements, like folder navigation and improved color distinction among elements, and more.

      • Apple Watch Online App Creator

        Thinkapps is an online tool for creating Apple Watch prototypes without the need of code. It helps you setting up the elements necessary to deliver a complete app, so the developers in your team have a clearer picture of what to do.

      • url.js: URL Manipulation JavaScript Library

        url.js is a lightweight library built with JavaScript to manipulate the page URL. It uses various parameters to find the name and encoding results, it can parse a string as querystring, stringifies a query object, and more. This library is licensed under the MIT license.

      • Cayley: Open Source Graph Database

        Cayley is an open-source graph database inspired by Freebase, using Google's Knowledge Graph. The idea of this is to help developers analysing Linked Data and graph-shaped data in semantic websites, social networks and more. It was written in Go, and it has a complete API, a built-in query editor and visualizer, modular design and it's fast. It was created by Google.

      • Google Prediction API: Predictive Analysis Bu...

        A tool for analysing data and make predictions based on Google's algorithms. It uses a very nice interface, helping you predict future trends using historical data, detect spam and recommend products. It is fast and reliable, has cloud integration, powerful development tools, and more. You can use it for free for a limited time.

      • cmder: Portable Console Windows Emulator

        cmder is a portable console emulator for Windows. It has a Monokai color scheme and a custom prompt layout, and it's a complete package that you can carry anywhere, in a USB drive or in the cloud, so you don't lose your settings and overall progress. It was developed by Samuel Vasko.

      • Online Microdata Snippets Generator

        An online microdata generator that helps generating rich snippets and graphs supported by Google. It supports a full list of structured data schemes, and it lets you aggregate offers, reviews, articles, business, events and contact info, software apps and more.

      • CSS Div & Text Centering Tool

        A simple online tool for centering divs and texts with CSS. You just need to select the content you wanna center, modify the container's size, its alignment and that's it. Finally, download the CSS and include it on your template. It was created by Oliver Zheng.

      • .resizr: CSS Media Queries Testing Online Too...

        .resizr is an online tool for testing any website's media queries to check if it is completely responsive. With it, you just add the URL of the site you wanna test and select the device, mode and other features. There are almost 30 devices to test your site on, and you can use it for free.

      • Open Source Large Files Versioning Github Ext...

        Git Large File Storage is an open source extension that allows you versioning large files. It replaces these large files (like audio and video), including text pointers inside Git, and at the same time stores the contents on remote servers. With it you have more repository space, faster cloning and fetching, access controls and permissions.

      • SaaS, PaaS and IaaS Free Software List

        A list of SaaS, PaaS and IaaS software and offerings with free tiers for developers. It will be a really useful for infrastructure developers, like System Administrators, DevOps Practitioners, and more. The repository grows daily and it's carefully curated. It was created by R.I.Pienaar.

      • APIembed: Multipurpose Code Snippets Generato...

        An online tool for creating auto-generated code snippets in many programming languages for your website, blog or API documentation. With it you can embed your API request, customize your widget, generate the code and then grab the generated result to use it on your website.

      • WPSpeedster: Website Speed Testing Online Too...

        A website with Google PageSpeed test scores for 2500 free themes from the official WordPress theme repository. The tests were executed on the blogs sample page and the home page, both in mobile and desktop environments.

      • Nines: Web Development Performance Tool

        Nines is a web tool that helps developers find critical performance issues while developing. It intends to show developers and designers the impact their changes have on the performance of the site. It shows a bar at the bottom with the page speed, the median, and you can click on them and check more data.

      • Prepros: Multilanguage Programming Compiler

        Prepros is a compelling tool for developers that allows them to compile LESS, Sass, Compass, Stylus, Jade and many more languages thanks to CSS prefixing. You can download it for free and use it on Mac, Windows or Linux machines.

      • osquery: SQL-powered Analytics, Monitoring &#...

        osquery is a complete tool for operating systems made in C++, JavaScript and powered by SQL. It was created by Facebook and its goal is to provide strong and accurate analytics, monitoring and instrumentation. It can be downloaded for free and implemented in any web project.

      • Dust-Me Selectors: Firefox & Opera Code ...

        Dust-Me Selectors is a development tool for Firefox and Opera that scans the CSS code on your website and tells you which selectors are unused. Among its features you can scan any HTML page, add an XML or HTML sitemap and scan pages automatically (Firefox version only).

      • Online API Search Engine is an experiment that allows you to search APIs on the web. You can implement the search engine, which is also open source, and run it in your own projects. It crawls known APIS.json files, top domains on Alexa and follows include links.

      • Online UX Project Checklist

        The UX Project Checklist is an online tool that helps developers check their process while creating a website, helping them to create a user-friendly and goal-focused website. The tool helps you check if you have accomplished the research, plan, explore, communicate, create, feedback and more stages of the UX process. This tool is free and you can connect it with Google+ to save your progress.

      • Scala: Object Oriented Programming Language

        Scala is a scalable language for creating apps, it is Object-Oriented, supporting advanced component architectures through classes and traits; functional, efficient, integrated seamlessly with Java, future proof and more. It is open source and ready to implement in any project.

      • Breach: JavaScript Modular Browser

        Breach is a modular and free browser created entirely in JavaScript that has versions for Mac OS and Linux only. It uses HTML, CSS and JS in its first layer, the Chromium Content API in its second layer (allowing it to be secure) and NODE.js in its third level.

      • Screen Sizes: Complete Devices Charactistics ...

        Screen Sizes is a complete table of sizes for every mobile device known. It includes information about the operating system of the device, the physical size, its width, height, the pixel density, aspect ratio, and more. This table is a starter point for any type of design, if you want to implement a creation that reaches more people.

      • Nitrous: Multilanguage Browser IDE

        Nitrous is a complete IDE for your browser that lets you program in Ruby, PHP, Python, Go, NodeJS and other languages. You can synch it with your favorite code editor such as Atom, Sublime Text or Textmate, allowing you to work from anywhere in a shared or private workspace and do it fastly.

      • Tweene: JavaScript Animation Proxy

        Tweene is a JavaScript library proxy that allows you to control and switch between several types of different JS libraries, created for multiple purposes. It is a great way for avoiding so much coding, providing flexibility and stability in the process. It works with GSAP, Velocity.js, Transit (CSS transitions) and jQuery.

      • ngrok: Localhost Secure Tunneling Multiplatfo...

        A downloadable tool that creates a tunnel from the public internet to a port on your local machine. It is useful in the case you are developing a website, and you want someone outside to see how's it going without deploying it. You just pass the URL and grant access. ngrok also captures all traffic through the tunnel.

      • Frontend: Web Development Boilerplate

        The Front-end Boilerplate is an easy to use development tool for creating attractive and useful web projects. It has a tasks manager, you can use your dependencies, you can choose what preprocessor to use, and it includes many features that can make your development a great experience. You must have Node and npm installed to use it.

      • Subtext: Web and Desktop Code Editor

        Subtext is a code editor for Chrome browser and Chrome OS; an offline tool that you can use on your browser and desktop. It lets you edit local files thanks to a simple user interface. Among its features you can find: - Project management - Fuzzy search for opening files - Versatile layout - Fullscreen mode It supports several types of syntax, including HTML, CSS, Javascript, PHP, LESS, Stylus, Coffee, Ruby, Python, Markdown, Mustache, and many more. You can download it for free.

      • Webplate: Website Building Front-end Framewor...

        Webplate is a useful front-end framework that allows you to focus your attention exclusively on building your website or mobile app. It is a UX experiment that you can download and use for free, or improve since it is open source. Inside you can find: - A robust and responsive layout engine - Global buttons and elements - Customizable forms - Simple modals - Icon fonts support Also, it includes two types of "starter kits": the Quill UI and the Stripe UI. The first one created for writers and the other one for quick creations. This framework was created by Chris Humboldt and was uploaded …

      • Website Development Starter Kit

        This is a web starter kit that will help you not only create a compelling and useful website that can be viewed in any desktop or mobile device, but to know how you can improve it at all levels. Among its features you can find: - A responsive boilerplate. - An up-to-date style guide. - Cross-device synch. - Live browser reloading. - Performance optimization. - Insight reporting. - SASS Support.

      • Scotch Panels: jQuery Off Canvas Menus and Pa...

        Scotch Panels is a jQuery plugin for easily creating off canvas menus, navigation, and other panel types such as images, videos, and iframes. They have lots of features and different options for every skill-level to tweak and implement into almost any project. They work from any container so you can put your side navigation on any element you want. It even provides excellent browser support via a JavaScript fallback.

      • AngularJS and Bootstrap Responsive Dashboard

        A dashboard created as an accessible, responsive and certainly good-looking alternative to other admin panels out there. It starts out pretty simple, providing you with a small number of modules to keep things clean, but you can always add more as the project goes along.

      • Omega! Web Platform for Python

        Omega is an attempt to bring back innovation to Python web frameworks. Its goal is to be more than a web framework since it aims to be a platform on which any type of web application can be built, batteries included. That means  this tool ships with support for creating ORM-backed CRUD applications, NoSQL REST APIs, real-time applications using Websockets, and simple, mostly static page applications.

      • jQuery ScrollAdvance: Plugin for Movable Back...

        This jQuery plugin allows the user to move the background in any cardinal direction thanks to values that can be changed, adding useful functions for the scroll position as scrollBottom() or scrollTop(). It is published under the MIT License.

      • heatmap.js: Dynamic Web Heatmaps

        A JavaScript library will help you make three-dimensional data speak up. Heatmap.js v2.0 adds new value to your project, and you can build a business based on it, study and visualize user behaviour, and much more. Whether you want to have an aggregated overview of your users behaviour or look at thousands of events distributed on a map, this tool has all your heat map visualization needs covered.

      • CSS Layout Generator

        This is a supremely useful tool that will generate column layouts including footer, header and menu. You can set the measurements by either pixels or percentages. The inclusion of sidebars can also be controlled. Take a look and create the right foundation for your project. It was created by Generate It!

      • Online CSS Validator

        ​This online tool created by the guys at CSS Portal helps you validate your CSS files with a simple form. Validating your CSS is the first step (before optimizing it) since it allows you to find errors in your CSS that can make your page display incorrectly. After that, a good optimization is required and can help you website load faster and smoother than ever.

      • CSS Code Optimizer

        ​Optimizing your CSS code is crucial if you are running a large site. CSS has a tendency to get cluttered, just like HTML does. This generator will format and optimize your CSS code using a variety of different compression settings. Once you're done with your CSS codes just upload them to your web hosting service provider and see the results of your CSS design online.

      • Online Password Generator

        ​This online password generator will allow you to create a range of strong and secure passwords using a combination of uppercase letters, lowercase letters, numbers and punctuation symbols. Within you can select the password length, lowercase letters, capital letters, numbers, punctuation, and avoid similar characters to create a powerful password. Then just click on generate, and you are done.

      • Bootstrap Magic: Online Tool for Creating The...

        Bootstrap Magic is a great tool for creating your own Twitter Bootstrap theme. And after all, you can save it. It takes advantage of the latest version of Bootstrap; you can preview your work, import variables, pick colors easily, choose from lots of Google Fonts and many more features.

      • Hex Tool for Managing Color

        This is an interesting tool for managing color. It works just by adding the 6 digit hexadecimal value for a color and it will give you similar ranges. You can also lighten or darken the ranges, and apply other options to get the best variation and apply it to your website.

      • LayerVault: Organize, Present and Collaborate...

        LayerVault is a cloud-based application that manages revisions, stores files and helps designers collaborate around designs. With it, you can synchronize, store and organize your design files, but it syncs only the projects you need, giving you the option to store different sets of projects.

      • -prefix-free: Use Only Unprefixed CSS Propert...

        -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. Among its features:- Processes every stylesheet in <link> or <style> elements and adds a vendor prefix where needed.- Processes elements with a style attribute and adds a vendor prefix where needed.- Takes care of new <link> or <style> elements, style attribute changes and CSSOM changes (requires plugin).- Lets jQuery’s .css() method get and set unprefixed properties (requires plugin).

      • Typecast: Create Better Web Typography

        ​Use Typecast to create visual and semantic designs. This online tool allows you to arrange the texts of any website, modify the typeface, weight, color, size, spacing and more. You can also create various instances of the same page; for instance, you can set up different configurations for different screen resolutions.

      • Bonfire: Easy PHP Web Applications

        Bonfire helps you build CodeIgniter-based PHP web applications even faster than ever by providing powerful tools and a beautiful interface you won’t be ashamed to show your client. With it you have built in users, enhanced debugging and a significant set of developer tools.

      • Screenhero: Easily Review your Code

        Screenhero is awesome for code review and pair programming. With simultaneous control, both sides can switch seamlessly between driving and navigating, with zero overhead. Works with every IDE. Instantly present your ideas to your clients, without having to send multiple files back and forth.

      • sachet: Handcraft your Own Development Enviro...

        sachet allows you to handcraft your development environment. By allowing you to select features and functionality that you are comfortable with, it generates you a small package with the appropriate configuration files, plugins, and theme so you can leverage the potential of your Vim editor.

      • Chronos: Fault-tolerant Schedule

        Chronos is airbnb's replacement for cron. It is a distributed and fault-tolerant scheduler which runs on top of mesos. It's a framework that supports custom mesos executors as well as the default command executor, thus executing SH (on most systems BASH) scripts.

      • Scriptular: JavaScript Regular Expression Edi...

        Scriptular is a JavaScript regular expression editor. Inspired by Rubular, it gives you a simple way to test JavaScript regular expressions as you write them.

      • js-sequence-diagrams: Turn Text into UML Diag...

        Here we have a simple JavaScript library to turn text into vector UML sequence diagrams. This tool was heavily inspired by the website, which offer a serverside solution. You can use Jison to parse the text, and Raphaël to draw the image.

      • Log: Console with Style

        Log is a simple utility to add style to the browser’s console output. It makes developing for the web and debugging easier by adding colors, ordering content, and more.

      • VisualOps: Cloud Management for AWS

        Here we have a drag and drop real AWS resources to a canvas to quickly design your application architecture. It features several improvements like: - Drag-n-drop to build. - Built-in modules to configure instances. - One click to launch. - Easy exporting. - Realtime cost estimation.

      • TogetherJS: Collaborate in Real Time

        TogetherJS (formerly know as TowTruck) lets users communicate, co-author, co-browse and guide each other. It’s is implemented in Javascript; no software or plugins to install, and it’s friendly with existing web pages, while still letting developers customize the experience.

      • csxs: App Development Tool

        csxs is a command line tool written in node.js for creating, compiling, packaging, debugging, and deploying extensions for Adobe Creative Suite. It’s easy to use and it is powerful.

      • xctool: Easy App Creation

        xctool is a replacement for Apple's xcodebuild that makes it easier to build and test iOS and Mac products. It's especially helpful for continuous integration, and among its features you can find:- Runs the same tests as Structured output of build and test results.- Human-friendly, ANSI-colored output.- Faster, parallelized test runs.

      • Yeoman: Web Tool For Building Apps

        Yeoman helps you kickstart new projects, taking into account the best practices and tools to help you stay productive. It provides a generator ecosystem, which is  a plugin that can be run with commands to scaffold complete projects or useful parts.

      • Brunch: Lightweight HTML5 Application

        Brunch is a lightweight approach to building HTML5 applications with an emphasis on elegance and simplicity. This tool compiles your scripts, templates, styleslints themwraps the scripts and templates in common.js / AMD modules. It concatenates scripts and styles, generates source maps for concatenated filescopies assets and static filesshrinks the output by minifying code and optimizing images. watches your files for changes, and notifies you about errors via console and system notifications.

      • Deployd: Build APIs Easily

        Deployd is an open source platform that allows you design, build, and scale APIs for web and mobile apps in minutes instead of days. After you've set it up, you can deploy to a high-performance cloud, or host it yourself. You have an API just with one click, manage its resources through a web-based platform.

      • Viewport Resizer: a Responsive Bookmarklet

        Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page. It features: - Full customization. - Add and customize sizes on the fly. - Manual orientation toggle by click. - Automatically device window orientation in "Auto Size" mode. - Media query support. - Viewport animation. - Adapt meta viewport tag from the current page.

      • Emmet: Optimized Snippets for the Web

        Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and SSC, but can be used with programming languages too.

      • Vagrant: Development Environments Creator

        Vagrant allows you creating and configuring lightweight and portable development environments. It is a tool you can install on Mac OS X, Windows, or a popular Linux distribution. After that, create a single file to describe the type of machine. It creates identical development environments for everyone involved in the project.

      • Adobe Edge Animate CC: HTML Animation Authori...

        ​The Adobe Edge Animate CC is a great tool for creating animated, interactive content for the web. It allows web designers create HTML for web and digital publications, as well as sophisticated ads for media that can be viewed on any device.

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

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

      • Flip Menu Tiles CSS

        A CSS snippet that features tile-like containers that hold a feature image (in this case of a dish) that flips over on its back when you click on it transforming the image to grayscale and showing you the text information over the image.

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

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

      • CSS and jQuery Sliding Effect Lateral Menu

        A simple menu on the left side of the screen which works as "dropdown" once the user hovers over some elements. It has a flat style, and can be applied and modified easily thanks to the simple CSS and jQuery snippets included. This code can be used freely.

      • HTML, CSS & JS Context Menu Snippet

        A fully customizable and appealing gradient context menu to add to your websites taking the most out of its dark icons, smooth selected item highlight and sub-menus. This context menu was created by Ryan Morr.

      • 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.

      • 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
    • Mobile UIs (53 submissions)

      Huge catalog focused on mobile user interfaces for social and music applications, as well as controls for mobile panels.

      • A1: Colorful Mobile UI Kit

        A1 is a gradient-colorful UI kit for android devices crafted in a minimal design featuring 45 screens, 3X Full HD views and over 250 elements including 60 line icons.

      • Clean & Minimal Fashion iOS UI Kit

        A clean and minimal fashion iOS UI Kit that features black and white layouts and translucid coloured containers.

      • Colours of Karl: Dark & Colorful Mobile ...

        A UI kit for mobile devices that features colorful containers that contrast with a black background crafted in Sketch.

      • Android KitKat GUI Kit

        A GUI kit for Android that features more than 1000 elements composing PSD templates in vector format. In this kit, you'll find Android's lock screen, keyboards, spinners, and plenty more.

      • InVision: Cross-platform PSD & Sketch UI...

        A UI kit for both Photoshop and Sketch that comes with 52 templates, 35 custom icons, and more than 180 extra elements all of it completely ready-to-use for Retina Screens. It features a nice minimal style design laid out on a pixel-perfect 12 column grid being it all fully vector crafted. Each of the versions come in an almost 500MB zipped file.

      • iOS 9 Sketch UI Kit

        A complete iOS 9 UI Kit for Sketch fully crafted under Apple guidelines and featuring preset screens, app icons, status bar icons, keyboards, Siri, lock screen, settings, and many more.

      • Lithium: Minimal Mobile UI Kit

        Lithium is a nice UI Kit that comes in three main schemes; teal, amber and lilac. It comes in over 12 pages and more than 36 PSD files that weigh around 150MB featuring several kinds of elements such as authentication, messaging, friends list, calendar, events, newsfeed, navigation, user profile, and more.

      • Zeus: iPhone PSD GUI Set

        Zeus is a super complete GUI set for iPhone that feature PSD vectors, organized layers, adjustable to Retina Display. It comes along with 200 PNG & PSD icons, 10 patterns, and 30 different colors in each PSD file. Regarding the GUI elements, you'll find sliders, buttons, scrollbars, video players, widgets, login forms, and plenty more.

      • Elegance: Clean PSD & Sketch iOS UI Kit

        Elegance is an iOS kit that features a nice and clean style in its 12 high-quality iOS UI templates regarding clothes and shopping displayed in a crystal-clear 750 x 1334 pixels screen. Moreover, it comes with a fully customizable color structure and vector support icons.

      • Cardzz: iOS User Interface Kit

        21 iOS UI Kit screens specially designed for 6 iphone in cards style in a dark flat style and outlined icons. This kit was crafted by Volodymyr Kurbatov and delivered under an attribution 3.0 unported license. It weighs about 280MB

      • Philomena: iPhone Music Player UI Kit

        Philomena is a UI Kit for iPhone Music Player featured with 9 different screens that come in individual sizes, designed by Robert Berki in a flat dark style.

      • Free Sketch & PSD App User Interface Kit

        A beautiful app user interface for multiple platforms in PSD and Sketch formats. It includes 52 templates, 35 custom icons, and more than 180 user interface elements like blog post thumbs, screens for an app, profile and more. It is scalable, includes web fonts, it's minimal and has pixel perfect design. It weighs more than 300MB.

      • Ink: A PSD & Sketch iPhone UI Kit

        Ink is a fully customizable UI Kit in PSD and Sketch formats featuring iOS8 iPhone screens. It includes 10 elements in each format, among which you'll find screens for web pages, products, profile and more. It was created by Great Simple.

      • Free Android User Interface PSD Kit

        A free UI kit with 8 smart objects including profile, feed, photos, notifications, and more, made in Photoshop. It can help you to build any Android application easily, and you can use this freebie for personal and commercial projects. The file weighs around 123MB.

      • MedApp: Neat Medical App PSD UI

        A neat app user interface for medical purposes made in PSD. It includes vector design elements like icons, buttons, boxes, tabs, pagination, alerts, and a simple flat illustration of the body, with easily editable shapes. The UI has a basic color palette and post thumbs.

      • Free Vector AI iOS 9 GUI Template

        An iOS 9 GUI template made for Adobe Illustrator and vector shapes for easy edition. It has design elements for status bar, controllers, tab bar, navigation, toolbars, keyboards, activity and many more screens. They are totally scalable, and its elements are organised. Created by Vasil Enchev.

      • iCollection: Clean PSD UI Kit

        iCollection is a user interface kit made in PSD format including 38 screens. The screens are divided into three categories: iShop (perfect for e-commerce apps, with 15 PSD files), iShoot (12 PSD files) and iOwn (13 PSD files). creation is totally editable and you can use it freely. It weighs 148MB.

      • iOS7 User Interaction PSD Kit

        A User Interaction kit made in PSD format that will allow you to create comfortable and intuitive app designs for recent iOS interfaces. To use it, just drop the smart object over the layout to test your design. It was created by Dribbble user Bunin and based on the article The Rise of the Phablet.

      • UX Wireframe AI Set

        A beautiful and useful UI kit for a mobile app made in Adobe Illustrator. It includes all the pages you might require to deliver a great user interface for your own business or for a client of yours. It has a flat style, and several layers for creating account, settings, profile, messages, timeline, contacts, map, calendar, music player, gallery, store, product details and more. It was created by Michal Koczor.

      • Free Multicolor Mobile UI Kit

        A UI kit that includes screens for mobile apps made in PSD format. The set includes a multicolored selection of elements like buttons, contact forms, color palette, search screen and more. the set is free and can be used in any type of project. It was made by Victor Vorontsov.

      • Android L Bootstrap UI Kit

        A UI kit that was inspired by Android L, the upcoming update of the popular OS. It is a set of elements and components of Bootstrap 3.2 that allows you to make a web version of the mobile experience. Its features are 28 layered PSD files, organized layers, elements and components of Bootstrap 3.2 It includes elements like buttons, dropdowns, alerts, links, badges, jumbotrons, breadcrumbs, inputs, labels, media objects, navbars, page headers and many more design elements that can be added into any web project. Created by Vitaly Chernega.

      • Amsterdam: Flat CSS User Interface

        CSSDeck user Vadzim surprises us again, this time with a complete user interface made in CSS and HTML. It is called Amsterdam, and it's composed of several design elements with a simple flat style and clean colors. Among the features it has, we can find: - A profile widget with a big thumbnail, name and description labels and a button. - Video player. - Weather widget with temperature, logo and date. - Content widget with feature image, title and description. - Calendar widget including day of the week, month, and the respective numbers. - Music or podcasts player. - Search widget. You can use this UI for free …

      • Illustrator iOS 8 Vector UI Kit

        This is an iOS 8 illustrator UI kit. It is the update of the free vector UI kit for iOS 7. The UI updates from Apple were subtle, but they are not minor. Some of them include: - Spacing. - Element positioning. - Font size. - Font weight. - Some more adjustments. The icons, even though they look the same, were redrawn. The spacing has obviously to do with the new devices' sizes, so the positions are no longer fixed. Regarding the additions, this UI includes the recent QuickType bar, the notification banners (expandable), the Messages radial UI, Health app UI, lots of icons and the weather …

      • TETHR: Free and Beautiful iOS User Interface ...

        TETHR is a set of 138 UI templates that comprise lots of design elements, including mobile applications, e-commerce, messages, multimedia, navigation, social and tracking items. The zip is divided into 8 PSD files that you can use for your next projects.

      • UI Freebie: Social Widget in PSD

        This is a mobile app home screen/profile page showcasing a dropdown from the navigation bar on the top. The widget includes several icons at the top. Such icons depict charts, a messaging box, a calendar and more. Right in the middle of the widget there's the user's profile pic, followed by the name and location. Also, it shows the amount of followers and following, besides a "Follow" button. It's available as an editable PSD file.

      • Clean PSD iPhone Profile App

        An iPhone profile screen in five different colors. The design has 100 percent shape layers and icons that can be implemented into any app design. The flat style and the pastel colors (which are subtle, non-intrusive, clean and beautiful) give the design a touch of professionalism without losing its playfulness.

      • Flat Style Dribbble App PSD Concept

        A stylish concept of a mobile app for Dribbble consisting of profile, gallery, details, comments, and upload screens, all with a flat and pink graphic style, and made in vector shapes in Photoshop for easy editability. Among the design elements you can find there are menus, social icons for sharing, liking and commenting; tooltips, and many more items to make a great mobile app.

      • Mobile App Two Screen UI

        This mobile app UI design is unique because it conveys the usability and the behavior of the elements beyond the states of a button, which is even more evident with the color scheme chosen of dark teal and salmon. There’s also a small surprise inside the PSD you might not expect.

      • PSD App Graphic User Interface

        This mobile user interface is made up of four screens with the basic elements for a social app, bringing a mixture of creamy autumn colors and a gorgeous aqua login screen. The ZIP includes four PSD files – Feed, Login, Menu and Profile – all of them with organised layers to make your job easier. The file is completely free and editable.

      • White Stripes User Interface PSD Kit

        A complete stylish GUI freebie, providing almost anything one might need from the basic bars, text fields and buttons to charts, players and tag clouds; all in a simple style of white lines on a proposed blue background. The whole PSD is neatly organized for comfortable managing.

      • Flat Free PSD Mobile App UI Kit

        A mobile app UI in PSD designed to be perfectly functional, clear and visually striking because of its use of dark grey and pink tones in a flat style. The properly organised layered file has different elements for any app you might want to create, as well as a concept proposal of an app's screen.

      • iOS 6 User Interface in Grey and Blue

        This is a small iOS 6 UI design containing top navigation bar, a tab bar, sliders and toggles in a nice textured mix of gray and blue. The design also includes icons for profile, chat/messages, camera, uploads and images. The design is minimal, making use of textures, noises and gradients to achieve this. This is a free PSD format file.

      • Mini Navigation Bar UI Design

        This mini navigation bar user interface in dark colors and glossy finish is completely organized and has all the items as smart objects, for maximum editability. It is a minimal blue bar, perfect for a mobile app. It includes icons for recording audio, location, liking and repeating, besides the search bar.

      • Sightsy: A Free iOS7 App PSD

        This two-screen app UI in soft cold colors is a valuable resource for any app given the simplicity of its usefully layered PSD. The original ZIP contained files for both windows and mac, and a way too large PSD so it has been edited to remove the extra weight (basically an invisible noise layer on top), but you still have both versions available.

      • iPhone Camera App UI

        A stunning design for a camera app, intended to be used in iPhones. It contains sharp details such as chrome effects for the icons, a toggle switch for the flash, polaroid-like animations to show the last picture, and much more. Finally, a leather texture decorates the bottom of the design.

      • PSD Ruby Notifications Bar

        This is a notification bar that displays anything you want and offers player capacity as well in a small ruby package. It is a flat widget, has a music control, some icons and labels in the list array, a scrollbar and a handler. The colors are not bright at all. This widget was created by Deepak Jose.

      • Media Player App User Interface

        This freebie brings a proposal for a media player app's screen in a simple and flat style with hierarchical functionality. The design elements included are the album cover artwork taking over half of the whole box, the name of the song currently playing, the artist, a sliding time counter, the player and some icons for shuffling, repeating track and volume. The design is totally editable, and the PSD is free.

      • Cinema Guide iOS 7 App User Interface

        Here we have a simple film guide application user interface for iOS 7 in a sort of 70′s feel. Heavy on color to focus on what’s important, what to watch, and how much worth it is to watch it. Its design elements are thumbnails, title, tags and number of seasons' labels, and two icons for dropdown menus, arrows and stars for rating it a flat style.

      • iPhone Mini UI in Blue

        This is a mini user interface (more like a widget) for iPhone composed of a header with icons for navigation and refreshing content. It was created in a soft grey and royal blue combo with heavy / bold typography. Other design elements are thumbnails and icons for photos, reviews and favorites. You can download this for free. Ionut Zamfir from Dribbble is its creator.

      • iPhone Mini User Interface Vermilion

        This design is a mini user interface with iOS 7 styles, although a little flatter. It includes a header that also works as a navigation bar with a couple icons for a dropdown menu. The design uses soft tones of grey complemented with vermilion; it has beautifully outlined icons that transform into flat icons according to the action, and all of that matches the …

      • Flat Blogging UI Design PSD

        A flat design that thrives with its well-accomplished areas of color and its reduced color palette to generate a dynamic blogging app or tool. It is very polished and useful PSD, including elements like a text editor, with saving, preview and publish buttons, a "related posts" widget, a calendar, a tag generator, a menu with search, a subscribe form, map, categories and more. This UI was created by Riki Tanone.

      • Flat Design User Interface Kit

        This is a set of items from a flat, colorful UI, more than perfect for mobile interface and apps. The set includes elements such as buttons, inputs, search fields, text areas, checkboxes, toggle switches and dropdown menus. With pink, purple, orange and blue accents available.

      • Dark Flat PSD User Interface Kit

        A PSD kit with some items from a flat dark user interface such as buttons, inputs, search fields, text areas, checkboxes, toggle switches and drop-down menus which are perfect for mobile interfaces and apps. The colors available are red, green and blue, with the addition of several states (pressed, hover, default, etc.). The PSD is totally free for download.

      • Weather App Screen PSD Template

        A beautiful concept for a mobile weather app in PSD that displays news after selecting the desired city. Its appearance is very simple, but just as effective, splitting itself in half in order to show both current and future weather updates. The styling is flat, with bright green details highlighting the app.

      • Mobile Email Application PSD Template

        A flat-styled widget created by Regy Perlera, based on the designs of another Dribbble contributor, Julia Khusainova. The idea is to use this creation as an e-mail application, taking advantage of a sharp color palette and simplistic layout. Also worth noting, a space next to every message allows the showcasing of images.

      • iOS Flat UI Created in Photoshop

        This project by Tim Green intends to provide an almost-flat-styled concept for an iOS application, moving away from the realistic and gradient-heavy appearance of iOS 6. Of course, iOS 7 was released afterwards, starting a simplistic era for the system's design, but maybe these PSD files could be even more useful now!

      • Dark iPhone User Interface

        A sweet design in dark colors, intended for usage within a mobile application. The interface has different tones of black, giving it nice tonalities. Contrast is provided by white icons contained into the buttons, which stay completely obscure when inactive. Uploaded to Dribbble by Medialoot.

      • iOS 7 Application PSD

        A neat PSD file, providing you with multiple elements, forming a flat-styled mobile application, ideal for iOS 7 integration. Among the icons, we can find options for browser, social networks, camera, file manager settings, help, smileys and many more. It comes in english and arabic as well, a particularity that a few users might appreciate.

      • Compact iPhone User Interface

        This mobile UI kit manages to provide multiple elements within a compressed space. It features a good number of icon buttons, including camera, GPS, settings and more. Additionally, the middle sections displays a map, while a transparent tooltip provides extra information.

      • iTouch Targets: Free Gestures’ Guidelin...

        This interesting free PSD file contains a group of touch targets that we can use as guidelines for our own mobile applications. The targets have been created after studying these elements from different companies and their products. Designed specifically for Apple devices.

      • iPhone Wood UI PSD Freebie

        An original concept for an iPhone UI including a fantastic wooden texture. It allows you to add icons within the design and make them look as if they were embossed into the material, which results in an attractive effect that will catch your users' attention. Created by Virgil Pana.

      • Flat Vertical Widgets UI Kit

        A flat user interface that provides simple and elegant widgets, perfect for a vertical layout with a vibrant but concise palette. The widgets work for different purposes, as a media player, a revenue widget, a login, a profile badge with social elements, a task planner, an event planner and a clock. This is a freebie, and you can edit it as you like. The PSD is organised so you don't lose time.

      • Mobile UI Elements for a Mobile App

        An interesting set of UI elements for mobile devices, including the original PSD and the proper arrangements to be retina-ready. Among these items, we will find sliders, buttons, search bars, navigation icons, input fields and more. Brought to us by Dribbble’s user iSavelev.

      • Collapse Expand List View all items Download Bundle Submit
This a test message in global notification
Your download will start shortly.


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


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