A growing repository with 729 bundles & 10010 resources for web ninjas
    (freebies, plugins and snippets) updated & curated every day, so it never expires.
    • CSS Slideshows (27 submissions)

      A set of slideshows created with CSS, enabling you to display different types of media in neat and dynamic fashion.

      • Smooth Slider Vector Transitions Tutorial

        SVG Hero Slider is a code snippet that allows creating smooth slider transitions layered by vector shapes. It comes along with a short tutorial that explains how it was created by Claudia Romano.

      • Pure CSS Splitting Image Slideshow

        This splitting image slideshow was created with pure CSS, showing several images that break apart into multiple pieces. Once this happens, the next image appears and the process repeats over and over. This creation was put together by Nate Wiley.

      • Depth Effect On-Scoll CSS Slider

        A gallery depth slider created with CSS and jQuery. It works by scrolling or selecting one of the dots so the sliding animation tooks place. It shows two images, one of them with the caption. This code snippet was created by Nikolay Talanov.

      • deck.js: Presentation JavaScript Plugin

        A plugin made with CSS and JavaScript, perfect for creating HTML presentations and slideshows. The presentations can be manipulated with the keyboard arrows, making it simple to navigate through them. It comes under the MIT license and it was created by Caleb Troughton.

      • StackSlider: CSS 3D Image Slider

        A compelling image slider made with CSS composed of two stacks of cards from which images get "picked up". This experimental slider uses CSS 3D transforms and perspective. This work in modern browsers perfectly, but still has some bugs.

      • Centered Content Slider’s Code Experime...

        SNÖGRAFX, from Codepen, has created a friendly slider called Owl Carousel. Its primary purpose is to deliver a simple way of passing slides smoothly, as well as integrating easily with any project. Among its features we can find: - Control points for smooth slide swapping. - Previous and Next controls. - You can swap between slides with the mouse (or your finger) just like you would do on a mobile device. - Has responsive capabilities. It is really simple to integrate into any website. You don't need more than a few lines of JavaScript, CSS and HTML to make it run, and then you just …

      • Complete CSS Slider

        A classy slider created and animated with pure CSS. It includes next and previous buttons (which come with neat transparencies) plus navigation dots. A fade/zoom out transition gives a styling touch to the project. All credit goes to CodePen user Avi Kohn.

      • CSS3 Testimonials Slider

        Based on a Dribbble work by Subash Dharel, CodePen's Sara Soueidan has created this stylish set of boxes intended to be used to display testimonials, including pictures and a box for quoted text. The widget can contain multiple testimonials, thanks to smooth CSS transitions.

      • Circular SlideShow with CSS

        An awesome slideshow displayed in the shape of a half-circle. In order to explore through the images, simply click on the numbers below, as a neat animation will bring the corresponding picture. Project styled entirely with CSS by CodePen user Chris Mounsey.

      • Pure CSS Featured Image Slider

        A very simple slider, featuring a frame that goes around the image, as if it was hung on the wall. When hovering over the design, a set of dots animate into the view, allowing the user to browse through the pictures. This project was created with pure CSS by Joshua Hibbert.

      • CSS Slider Hover

        A super smooth slider that allows the user to view the pictures in it by hovering over the thumbnails below. The images transition nicely between them, using only CSS. Additionally, the design in entirely in black and white, except for the images being seen at the moment, which appear in color. Created by Marco Barría.

      • Simple Pure CSS Slider

        This project intends to provide an easy slider, coded with nothing more than HTML and CSS. It uses :target to work, so you might have to consider the fact that it creates additional browser history steps when going through slides. Uploaded to CSS Deck by Joshua Hibbert.

      • Pure CSS3 Slideshow Without Page Jump

        This code snippet prevents page jumps every time the user switches between slides. This is achieved with the help of a checkbox or radio hack technique in order to access each slide with a :checked selector, all with pure CSS. The slideshow also includes transition effects and is cross-browser compatible.

      • Simple CSS Image Auto Carousel

        A very simple image slider brought to life with nothing but CSS. The idea is to have a set of images that change automatically after a few seconds, but you can stop them by hovering on the design, which also triggers a subtle zooming effect. All credit goes to CSSDeck's Daniel Henriquez.

      • CSS 3D Cover Flow Slider

        This design intends to recreate the famous Cover Flow feature found in many Apple products. You can either click on the numbers below or directly on the images to select them. You can also find a subtle reflection effect, everything with pure CSS. Uploaded to CodePen by Chris Mounsey.

      • Fluid CSS3 Slideshow with Parallax Effect

        This thorough Codrops tutorial will guide you through the creation of a neat slideshow with a parallax effect, taking advantage of a few CSS3 properties. The idea is to control the slides with radio buttons, having two background images that transition at different speeds, generating the parallax effect.

      • Sliding Image Panels with CSS3

        A fancy Codrops project for creating a set of sliding image panels by using only CSS. The concept relies on a set of panels with background images (plus titles and sub-text) that animate when clicking on a label. It comes with four different animations, all working smoothly in browsers with CSS transition compatibility.

      • Fast Hover Slideshow with CSS3

        This very fun project for displaying pictures runs a super fast slideshow when hovering on the images. When the mouse is moved away, the current image is displayed. Hover again to get a new picture in the frenzy roulette. You can choose to add titles on top or leave the image clean.

      • CSS3 Clickable Slider: First Attempt

        More of an experiment than an actual functional design, this pen has a go at creating a slider that displays images in full screen and includes thumbnails for different albums on top. Arrows on the sides also aid you with navigation. Designed by John Motyl Jr using pure CSS.

      • CSS Only Tabbed Content

        Display tabbed content with this simple code snippet created with pure CSS. The blue section on the bottom allows you to go through sections, while a smooth animation moves the elements around accordingly. Moreover, a nicely texturized background wraps up the design. Uploaded by CodePen user Scott Magdalein.

      • Animated CSS3 Photo Stack

        This tutorial shows you how to create an amazing photo stack filled with all sorts of cool animations and transition effects when going through images. Everything is created with pure CSS3, ensuring smooth playback in modern browsers and even mobile devices.

      • PSD HTML Sliders Vol.1

        A neat freebie pack including three different minimalist sliders that allow you to showcase content with a clean presentation. The images slide with a subtle fade effect, for an event smoother interface. They come with their respective PSD and HTML templates, just because we love to please you.

      • PSD HTML Sliders Vol.2

        This freebie provides you with two clean, polished sliders so you can display content in an uncomplicated way to your visitors. They come with their respective PSD files and HTML templates, allowing you to apply any modifications as you see fit. Resource hosted at Elemis.

      • Horizontal News Carousel HTML

        As a follow-up to their vertical version of this same resource, the guys at Elemis Freebies are now giving away the template for this delightful horizontal new carousel, useful for different types of posts and articles. It comes in both light and dark colors and displays thumbnails, headers and sub-text.

      • Vertical News Carousel HTML

        The guys at Elemis Freebies are giving out this fantastic template for a vertical carousel in both light and dark color alternatives. This tool can be very useful to showcase news, posts, articles and related content in a clean way, providing thumbnail, headline and sub-text to catch the reader's attention.

      • CSS3 Image Slider

        This slideshow avoids the creation of new browser history steps when browsing through the images, like is the case with other similar tools. To achieve this result, CSSDeck user simonpicos makes use of radio input buttons with the :checked pseudo-class to take control of the slides.

      • Awesome Rotating CSS Image Carousel

        This amazing free slider displays four different images with their respective text sections, going through them smoothly while making full use of the power of CSS3's animation property. Keep in mind, however, that this interesting resource might not work in Opera and IE, since they do not support all of its CSS3 features.

      • Collapse Expand List View all items Download Bundle Submit
    • CSS UIs (16 submissions)

      Catch your users' attention and entertain them with interesting user interface controls for both web and mobile devices.

      • Material Design Lite Web Component Kit

        Google's very complete kit provides you with web components to put together in your website, such as templates, menus, loading bars, tables, among many more fully guided, stylable, customizable elements in CSS, HTML and JavaScript.

      • CSS & JavaScript Donation UI Form

        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.

      • CSS Material Inbox User Interface

        An outstanding inbox interface created in CSS following some Material Design guidelines. The design shows the emails organized in a simple array. Once you hover over one of them, a "read" button appears, and when you click it, a new box appears with the actual message. This UI is really simple and intuitive, and it was created by Jamie Coulter.

      • Toolkit: Rich HTML, CSS & JS UI Componen...

        Toolkit is a feature-rich set of UI components made in HTML, CSS and JS for responsive web and mobile projects. It focuses on mobile first, has flexible styles, is scalable, degrades gracefully, its code is reusable and it includes many more features to make your life easy.

      • Drunken Parrot: CSS, Bootstrap & PSD UI ...

        Drunken Parrot is a CSS user interface kit that includes a lot of elements you might need while designing a Bootstrap-ready Site. It is flat with bright colors to stand out, and including design elements like dropdowns, buttons, checkboxes and radio buttons, color palettes input fields styles, fonts, navs, labels, thumbnails, alerts, profiles badges and widgets. It can be downloaded both in PSD and CSS formats.

      • Get Sh-it Done: HTML, CSS & JS Web Kit

        Get Sh-it Done is a cool HTML, CSS & JS Web Kit with a personal license. It is a set of design elements, ready to be used and implemented into your next or current project, if the match your website's style. It is based on Bootstrap 3, making it a complete and beautiful UI kit. It is free.

      • Bootflat: Bootstrap-based CSS UI Framework

        Bootflat is an open source project UI kit CSS package in a flat, simple design. It is based on Bootstrap, offering support for Sketch users since the original comes in PSD formats only.

      • Animated CSS Flat iPhone

        An iPhone app mockup that activates an animation when you click on "Next Post". It is a beautiful creation by Codepen user Marius Balaj that when pressed, it shows another page, making it a cool experiment for app developers and designers to show their work in a single frame. It is a free code snippet, easy to modify and integrate into your projects.

      • CSS User Interface Illustration

        A CSS user interface that has relevant design elements for laying out a website. It is organised as a website, with boxes for content, a top menu, search, recent posts and other widgets. It was created with pure CSS, and it can be downloaded and improved. Marius Balaj created this and uploaded to Codepen.

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

      • Clean Webkit CSS3 User Inteface Elements

        A nice minimal UI set containing the following elements: form, inputs, range, checkboxes, radio, buttons, submit, text and password fields. They were created with CSS3 and they are fully adaptable in order to include them into your next development project whatever it might be.

      • CSS Blue & Gray Metallic UI Kit

        An interesting UI kit uploaded by Ryan Legler from Codepen that combines gradient effects and other CSS3 properties to improve the appearance of the input fields of a form. The user interface is composed of different elements created with minimal style, including text areas, buttons, selects, toggles, sliders, and more buttons with gradients. Also, it includes radio buttons and checkboxes in pure CSS.

      • Colorful Form Inputs UI Kit

        A design UI kit in which you can find buttons, search fields, tabs, menus, login boxes and tables in different styles that you can use right now in any of your projects. The kit has been designed and hand-coded from scratch in HTML5 taking advantage of modern CSS3 techniques, including a range of common user interface elements and font stacks, which look beautiful in modern browsers and degrade gracefully in IE.

      • Ultra-slick User Interface Elements PSD kit

        The 99Lime UI kit is an ultra-slick user interface elements with over 99 design elements to use in your Photoshop designs. It is composed of all sorts of text fields for forms, complemented with icons; it has checkboxes, radio buttons, toggles, progress bars, alert boxes, color pickers, tabs, accordions, tooltips, lists, slideshows, audio players, icons and more, all with minimal design.

      • CSS Animated Dashboard Widget

        An impressive statistics widget for showing multiple pieces of data. It has a crafted flat style, perfect for a mobile app or for using as a widget on your projects. It includes a top section with graphs, the value and the stock change. Right below, there are labels for info such as date and city, the amount of shares traded and the variation of the stock shown in bars, side by side with the yearly change.

      • Collapse Expand List View all items Download Bundle Submit
    • CSS Pricing Table (15 submissions)

      Pricing tables in different styles using mainly CSS

      • Fancy CSS & PSD Pricing Tables

        A set of pricing tables with a very fancy look that come available in PSD format as well as ready-to-use CSS for Bootstrap.

      • Flexbox: Compelling Pricing Table

        Thanks to the power of CSS, this code snippet generates an excellent pricing table allowing you to show your product's price ranges in a compelling and informative way. It has pastel colors and four prices by default, although you can change them and add more. This pen was created and uploaded by Codepen's user adamnemecek.

      • CSS Only Pricing and Comparison Table

        This price comparison web element uses only CSS and no tables, so it is 100% SEO friendly. You can easily edit its contents, like changing colours, and adding more columns or rows to achieve the look you want. It shows the regular comparison table information, like the type of plan or service, the price, the features and the action button. This is a free download released under the GNU license for personal use.

      • Services Table in CSS and HTML

        Here, we have the code for a simple services table created with CSS and HTML. It does not have functionality, but it is nothing you can improve with some additional code. It was created by Codepen's user Jitendra, and it has spaces for accessing all the relevant information, like an icon, the service or plan, the features and the action button.

      • Beautiful CSS3 Table Pricing Style Tutorial

        In this tutorial, the author is going to show you how to use some new CSS3 properties to design a beautiful table template like the one you see above. With Div and list style we define specific column in order to create a unique style adding classes to the markup list style. The result is a nice and minimal template for pricing tables with spaces for plan types, features, price and action buttons.

      • Price Table with CSS Shadows

        Here, we have a nice experiment in which the pricing tables are styled in a way you can see subtle shadows under it, making them look even more realistic than regular pricing tables, like if there were actual cards floating over a surface. This tables have the common information, like the plan type, the price, the different features organised as a list and the …

      • Elegant CSS Price Table Design in SCSS

        This pricing table shows you the main features of a product, the type of plan, the price and the action button in a black card, making it look very professional and elegant. Also, the colors of the relevant elements contrast clearly to highlight them. This pricing table was created by Scott Nix with the help of HTML and SCSS.

      • Fresh CSS3 Pricing Table

        Here, we have a fresh pricing table design created by Catalin Rosu. It shows 4 cards with different options and plans. Each card has a space for the type of plan, the price, feature spaces, and the action buttons for subscribing or to buy some service or product. It has been created with HTML and CSS. It lacks functionality, but you can add it by using a bit of JavaScript.

      • 3 Columns Pricing Table

        This is a set of free UI elements and widgets coded with HTML5, CSS3, and SASS, portraying a simple pricing table. Each plan has a title, price, list of features, and purple sign-up button. The original PSD was created by Edi Gil, and the coded version was made by Codepen's user Thibaut.

      • Simple and Minimal Multiple Pricing Table

        This minimal multiple pricing table was created just with HTML and CSS by Marco Biedermann on Codepen. It has different spaces for the type of plan, the features, and the price integrated with the action button. They do not change colors to give relevancy to any of the plans, but the central one has relevancy over the others by being a little bigger.

      • Functional Mini Pricing Table with a Flat Sty...

        This is the coded and functional version of Cosmin Negoita’s Mini Pricing Table. It is composed of three cards with the price and the name of the item, and the action button with different color, which are important elements to test which color works best.

      • CSS3 Pricing Table Demo and Tutorial

        When designing a pricing table for a product or service, your job as a web designer/developer is to make sure that the table is easy to understand, intuitive and clear. This way, you will help users to choose the best plan for theirs needs. In this article,  you will learn how to build an awesome CSS3 pricing table, with no images and just a …

      • CSS and HTML Flat Pricing Table

        This is a Dribbble rebound of Vlade Dimovski’s pricing table. It has come to life thanks to Chris Frees from Codepen, who used HTML and SCSS to develop it. The pricing table, however, is not fully functional, but it has a flat design only using code (no images). It has different sections for the plan, the price, some features and the action button.

      • Responsive Pricing Table with Hover Effects

        This CSS, HTML, and JavaScript resource consists of various price tables with a zoom effect when you hover over each one of them. The zoomed table also changes colors, calling for the user's attention. Each table is composed of a title section, a category, a list of features (or any content you add) and a “Buy Now” button.

      • Elegant Pricing Tables for All Kinds of Servi...

        This is a set of elegant pricing tables put together in JSFiddle. They have no hierarchy at all, so you are able to establish which one of it has the most relevant price. Also, you can show additional relevant information, as the features of the product, the quality and more. You can edit the code to improve it.

      • 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