A growing repository with 733 bundles & 10152 resources for web ninjas
    (freebies, plugins and snippets) updated & curated every day, so it never expires.
    • Simple Website Templates (8 submissions)

      This list has website templates in HTML and CSS that have minimal interfaces and are really easy to implement and use.

      • Lens: HTML Responsive Showcase Template

        A web template for showcasing projects, products, photos, or anything you'd like on a window-size webpage that features a retractile right-side menu.

      • Landed: Beautiful Business HTML5 & CSS3 ...

        A beautiful HTML5 and CSS3 template focused on huge images, simple divisions, parallax scrolling and a fully responsive design. A straightforward design that fits well with one-pagers. The theme can be used as a business website, a portfolio or even as a product page template for showing its features.

      • Saturn: Clean Personal Website PSD Template

        A template for a website made in PSD and available as HTML as well. It has a minimal style, composed of simple shapes and a beautiful color composition; its layers are totally organized and they are editable as well. This template was created by Afnizar Nur Ghifari.

      • Nokia Lumia Free PSD Template

        A template in PSD for a website about mobile phones, specifically the Nokia Lumia family, including mockups for the Lumia 920, 1520, 730 and others. It also includes beautiful photographs of headsets and other accessories. The template is clean and has a flat design; it is free and was created by Marko Ilic.

      • Landing Website PSD & HTML Template

        A complete PSD + HTML template for a landing page with a light design, composed of black and white tones. The template can be used by professionals and amateurs in any discipline, being able to show your products or services easily and elegantly and it includes portfolio, contact form and more. It was created by Tomasz Mazurczak.

      • One Page PSD Menu Template

        A PSD restaurant menu template created by Behance user Mushfiq Islam. The menu uses several fonts, among which you can find Aleo and Museum Sans with a smooth color usage as well. it has a featured image with logo, image bar, dishes information, contact, and footer. It can be used to create a website or just as a menu.

      • Lithium: HTML5 One-page Template

        Lithium is a compelling responsive HTML5 one-page template. It has been created with Grunt, CoffeScript and SCSS. This theme has several design elements and organized content, perfect for a portfolio or a startup. Among the features you can find: - Big featured area that can contain a plain color or an image and it will look equally excellent - Big centered logo - Moto area - About area - What I do area with little content widgets - Projects area with thumbs - Photography area with thumbs - Subscribe area - Social area - Footer A theme was created by Vadim Goncharov and it is free to download.

      • Rubiko: Complete One Page PSD Web Template

        Rubiko is a compelling one-page template that allows you to portray your products or services easily. Photographers, designers and agencies can use it to take digital goods to the next level. It is a pixel perfect creation and includes 12 sections. It features: - Slider - Features - About - Portfolio - Testimonial - Skill - Statistic - Blog - Latest news - Team - Clients - Contact It has a beautiful red color as its base. It has a weight of 530 Mb and comes in three versions. It was created by Petar Stojakovic.

      • Collapse Expand List View all items Download Bundle Submit
    • CSS Range Sliders (17 submissions)

      Set of range sliders put together in popular code playgrounds like JSFiddle, CodePen and CSSDeck.

      • Smooth SVG Balloon Slider

        A nice CSS slider featured by SVG format figures that have a nice wobbling effect as you slide it along.

      • Prettify: Simple CSS Percentage Range Slider

        A cool code snippet made in CSS depicting a simple sliding bar made with a realistic design. This bar includes a tooltip that changes the text accordingly to the percentage used. This code is can be modified in any way and you can use it freely. It was created by Codepen user Ana Tudor.

      • before-after.js: Image Comparison jQuery ...

        A compelling CSS and jQuery slider that divides two images within a frame for making a comparison. It can be used in software for showing how it was before and how it is now (like its name indicates). It has an MIT License and it was created by JotForm.

      • Slider Controls with Scale Numbers

        Philipp von Wedel from cssdeck has made an exciting freebie that looks like a slider control, but it uses div HTML elements to reach out this result. When you hover over each button, immediately a tooltip appears, showing the scale number. It could be used for music players templates or metric interfaces, and a great thing is that it is completely cross browser.

      • CSS UI Elements with Red and Blue Gradients

        This code experiment is a set of elements with an interesting style: one range slider (or just a slider) and two switches. Although this only works in Webkit, it is a small example of how powerful CSS can be. Transitioning the pseudo-element on the checkboxes was tricky, but not impossible. Most importantly, no additional elements were used. Use them on your next projects, as a website or a mobile app.

      • Minimal Music Player UI Created with SASS

        This is a set of knobs and sliders for graduating the volume and equalizing music within an app. It is composed of a volume knob and four sliders, which can be edited to perform any function. It is not functional, yet very easy to integrate in any mobile or web app that requires audio controls. It was created with SASS and HAML.

      • CSS3 Toggle Switch Version 2

        This experiment creates a simple and realistic switch with the help of CSS, JavasCript and of course HTML. It sure has a realistic, yet minimal appearance, perfect for those who like a touch of realism in websites, blogs or mobile apps, but it can be improved with CSS.

      • Range Slider for E-commerce Sites

        This is a simple range slider for an e-commerce website or app. It shows a range of prices which can be altered or even added to complement the original slider. It was created with HTML and JavaScript mainly, and even though it has a pretty simple and minimal design, it might be styled with a bit of CSS.

      • Range Point Slider with Multiple Input Option...

        This code snippet creates a range slider that can be modified by typing the values to the select, selecting them with the arrows or by dragging and sliding the range controls, allowing you to put it in any location to acquire a desired value. You can edit the CSS to improve the visual appearance of the slider, the HTML to implement it on your website or blog.

      • Cool Slider in CSS, HTML and JavaScript

        This is a simple JavaScript slider that indicates the position by highlighting inner lines. It just needs a few lines of HTML and CSS to work properly, and it can be edited to improve every aspect of it, like its looks, functionality and integration.

      • Functional CSS3 Range Slider

        This is the functional version of the CSS3 range slider that cssdeck's user Kushagra Agarwal posted some time ago. Actually, this version adds the ability to slide the range knob by using the HTML5′s range input element. Range inputs can be styled using CSS3 by using some Webkit only properties.

      • Simple Static Slider Created with HTML, SCSS ...

        This is an interesting static slider for indicating any number in a list. It is pretty simple, yet it indicates quite fluidly the value and the index where it is located. It is created with HTML, SCSS and Javascript, code fragments that you can modify to improve the general performance of the slider.

      • Drag and Drop Slider Compatible with iPad

        A simple slider created with CSS, HTML and Javascript, perfect for using on iPad. It has an animation when you hover over, in which you see the range number popping up, and a simple and minimal style. However, it can be edited in order to make it look like your website, blog or mobile app. It was created by Codepen's user Satoshi.

      • Sliding Scale by Dragging or Clicking

        This is a sliding scale with level indicator. Clicking on a level or dragging the knob work equally fine. It was created using HAML, SCSS and CoffeeScript to simplify the way code is written ergo making the load and the overall performance faster. It was created by Mark Roseboom.

      • Security Confirmation Slider for Deleting or ...

        This is a security confirmation slider, great for confirming the deleting or downloading of files. It is composed of HTML, CSS and JavaScript, which you can edit to integrate on your website, improve the appearance and add further functionality. It has a minimal style, and its author was Bennett Feely.

      • Modal Slider with Light Declination

        This is a modal slider inspired by one that does not have much style. This was, however, styled properly, improving the overall appearance, the border, shadows, and more. Even tough it is a great minimal example of a slider with push effect on click, it still lacks functionality.

      • CSS3 Brightness Regulation UI Design

        This is a simple slider for regulating brightness, created with pure CSS. Its style is minimal, with few colors and not too bright; you can add functionality via Javascript, and even modify the CSS to enhance the looks of it. This code experiment was created by Nick Colley.

      • Collapse Expand List View all items Download Bundle Submit
    • CSS Animations (43 submissions)

      CSS animations put together for the most part in code Playgrounds.

      • A CSS & jQuery Animated Background

        A snippet for generating particle-based animations quite suitable for header or featured content background.

      • Bat Pixel Art Animation

        A pixel art animation developed purely in CSS that features distorted transition. You can modify colour, size, and speed of the bat.

      • Elastic Pull To Refresh Concept

        An elastic pull effect for reloading feed in mobiles or touch-capable device interfaces.

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

      • GSAP Animated SVG Clock

        An animated vector-based digital clock that features really nice up-popping effects crafted by Icebob who used GSAP for the animation.

      • CSS & JavaScript Animations and Transiti...

        A library made in CSS and JavaScript for animating elements and creating cool transitions between blocks. It can be used in different situations for enhancing the appearance of your website or navigate between pages mobile applications. This plugin is licensed under MIT.

      • CSS3 Magical Animations

        A set of magical animations for design elements like buttons or static images. This uses CSS only, and the animations include out effects, perspective, rotate, slide, math, bomb, boing and off the space. The code is licensed under MIT

      • Animate Plus: CSS Properties Animation JavaSc...

        Animate Plus is a JavaScript library for animating CSS properties and SVG attributes. It helps you generate quick UI interactions and longer animation sequences. It was created by Benjamin De Cock.

      • iconate.js: Icon Animations JavaScript and CS...

        iconate.js is an animation library for icons made in JavaScript and CSS, allowing to transform one icon into other. It uses Font Awesome icons, but it also can use Glyphicons. It was made by Jignesh Kakadiya.

      • AniCollection: Online CSS3 Animations Collect...

        AniCollection is an online set of animations made in CSS3. They work for multiple purposes like focus the attention of the user, entrances, exists, fading effects, flippers, rotations, sliding effects and more. The effects can be saved and then downloaded in a bundle in CSS, HTML, jQuery or AniJS.

      • CSS Animation jQuery Plugin

        A plugin made in jQuery to make CSS3 animations that include HTML5 data attributes. With it you can lay out your animation steps by time (in seconds), percentages, or both, you don't need to use more @keyframes or browser prefixing and add multiple animations simultaneously in one element.

      • CSS & Canvas Loader

        A beautiful loader made with CSS and Canvas. It is full of little squares flowing through space. The cursor is replaced by a focal light that creates shadows from the squares. It is a compelling code snippet that can entertain people while a page loads, or it can work as the base of a game. It was created by Mladen Stanojevic.

      • CSS-based Content Blocks Animation

        A set of animations made with CSS and a bit of JS applied to content boxes. It uses CSS transforms and animations to organize the content boxes, allowing you to add more of them. They can be used in a blog or online magazine. This snippet was created by Monir Abu Hilal.

      • Pure CSS Checkbox Animation

        A gorgeous animation made in pure CSS for animating checkboxes. Once a checkbox is clicked, it gets illuminated and a check mark appears, and also the text changes its color to let the user know it is selected. This snippet was created by Dylan Raga.

      • Anima: CSS Animations JavaScript Library

        A simple plugin for animating all kinds of elements at a time. It uses CSS transforms and 3d-transforms along with Javascript to create animations. It weighs 5k gzipped, it's free and it was created by Yehor Lvivski.

      • Animated CSS Business Card Mockup

        A business card made with pure CSS transitions that animates when you hover over. At first, it shows the logo and the basic information (name and occupation). When hovered over, the card displays the social and contact information, like phone number, website and Twitter account. It was made by M. Alex Junaedi.

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

      • Baraja: Card Spreading jQuery Plugin

        A beautiful set of CSS transforms and transitions compressed within a jQuery plugin that allows you to show stacks of cards in different ways. Among its effects, you can find fan right and left, rotated spread (horizontal and vertical), linear spread right and left, and many more. remember they only work in browsers that support transitions and transforms.

      • Animate.css: CSS Animations Library

        Animate.css is a collection of cool, fun, and cross-browser animations compiled in a library to use in your projects. They are great for emphasis, home pages, sliders, and general just-add-water-awesomeness. It allows you creating custom and lightweight animations to style different design elements of your site. This library was created by Dan Eden Tweet

      • whirl: Pure CSS Loading Animations

        Whirl is a simple and useful set of loading animations in CSS with minimal impact and effort. It has several animations, and most of them spin (a few of them are just linear). And since the animations may not look well on your website, you can tweak them any way you like. This are the types of animations you can add: - Traditional - Duo - Double-up - Sphere - Sphere-vertical - Bar - Bar-follow - Line - Line grow - Line back-and-forth - Shadow - Shadow oval/shadow oval left - Shadow oval right - Ringed - Blade - Helicopter In order to use them, just include the stylesheet and add or remove the appropriate classes if …

      • Round Icon Wave CSS3 Animation

        A code snippet for a notification system created with CSS3 animations. It consists of two icons, one for notifications and the other for messages (chat). The design is really simple and attractive but what's important is the use of the animations to create an effect of wave, which works perfectly to grab the attention of the user. You can change the image and the waves will take the shape of it. Code snippet was created by Jascha Goltermann and its free the use and modify.

      • CSS3 Easing Animation Effects

        This is a set of 55 CSS3 animations that you can integrate on your website or blog. Among the effects this code snippet includes there are: - Bounce - Fade - Flash - Flip - Light Speed - Rotate - Shake - Slide - Swing - Tada - Wobble It does not need any JavaScript frameworks, and they can be fully functional just with CSS3 and HTML5. These effects were created by Pawan Mall and uploaded to CSSDeck.

      • Infinite Scrolling Background in HTML and CSS

        The Infinite Scrolling Background is an interesting concept of a background that never stops moving. If applied correctly, it can lead the user to think other elements are moving, like a starry sky and a rocket. This code snippet was created only with CSS and HTML, made and uploaded to Codepen by Scott Marshall.

      • jQuery.smoothState.js: Plugin for Adding Tran...

        smoothState.js lets you add transitions to eliminate the hard cuts and white flashes of page loads that deface the beauty of the user experience.

      • Animated and Styled Radio Buttons in CSS

        Here we have some simple animations applied to radio buttons. When you click one of them, the one that was previously activated banishes while the selected radio button appears smoothly. It gives websites and mobile apps a better appearance just by adding a few lines of code. This snippet was created by Tobias Harison-Denby.

      • CSS Holiday Card Animation

        A beautiful code snippet created with pure CSS for an animation that generates an attractive animated snow effect over an image that also has been created with CSS. It can be used in a website, a mobile app or an email to wish a happy holiday to the users.

      • Yin-Yang CSS Image Animation

        ​​Yin-Yang is a CSS animation that blends two images into one container, making them rotate smoothly. The design was inspired by a .GIF the author found online, improving it both in quality and performance. It was created by Zach Saucier from Codepen.

      • Fancy CSS Mannequin

        ​This code snippet helps you create a mannequin that moves in different ways, made with pure CSS. It is set by default in the "Run" state, but it can kick, punch, march and jump as well. It can be used (preferably improved) in physical education or activities websites.

      • After-Effectsy CSS3 Transitions

        An awesome set of ten different transition effects created with CSS3 and activated on hover, perfect for applying them to images and/or icons. Their inactive states include overlays in circles and square shapes, in diverse variations. Created by ksk1015 and uploaded to CodePen by Joakim Wimmerstedt.

      • CSS Animated Balloons

        A simple CSS animation uploaded by Bennett Feely from Codepen. It shows a funny group of balloons with floating animation supported by several browsers like Chrome, Firefox, Safari, Opera and IE10. They can be used in any kids project.

      • CSS Oscillating Fan

        An animated fan that oscillates and, at the same time, changing the color of the background changes. Created by Philip Zastrow from Codepen. The animation was made in pure CSS without any compiler, and even though it has some issues in IE10 and Firefox, but it works in Chrome and Safari perfectly.

      • CSS Books Collection Showcase

        A code snippet that displays some book covers sorted by category, adding a little animation when the mouse is over, showing a book stock; this is achieved by using the CSS box-shadow property. You can edit the book covers and place any image so its integration gets easy, for instance, into an online store or a catalog. This experiment was created by Grant Zabriskie.

      • Animated CSS Coming Soon Page

        Chris Violette designed this coming soon placeholder page for one of his clients and decided to add a unique feature for visitors with modern browsers. After the graphics and layout were done, he added some keyframe animation to the body background image and the "burst" behind the logo. The background image is constantly moving, so it looks like the logo is moving. Also, it has a nice spinning effect.

      • Animated Submit CSS Button

        A beautiful button that animates with a loading bar as soon as users press it. Useful to achieve a good look and inform about the current progress.

      • CSS Hover Icon Flip to Text

        A simple code snippet for a circle containing an icon that flips to text on hover. It was made using CSS3 transformations and transitions, and it can be used in any website to present simple information or even add links to it. It was created by Andrew Do and uploaded to CodePen.

      • Animated CSS3 Downloader

        LukyVj from CSSDeck has decided to apply a recently-found effect to this full-screen loader, with neat results. It shows three screens in total: A simple "download" button with a white background when inactive, switching to black on hover. Finally, when clicking on it, a spiralling couple of glowing arrows signify the start of the download.

      • CSS3 Box Shadow Transitions

        An amazing set of hover transitions created by Shinji Yonetsu. It contains everything you can think of: Masks, gradations, floating effect, slides, accordions and more. It even includes advanced effects for the most skilled developers or those wanting to create truly impressive designs.

      • CSS-Only Search Input with Transition

        This code snippet creates a search bar that expands when the user clicks on it. Developed with HTML and LESS, it is ready to be implemented in your website o blog, and it animates smoothly. It was created by Javier Artero.

      • Animated CSS Ring Menu

        The CSS3 Ring Menu is just a simple unordered list with one superior link and four links as the list items. It activates on hover and uses a spiralling animation to show and hide the list elements. You can edit the code to improve its looks, functionality or even add effects.

      • Simple CSS Hover Marquee

        If you need to display a long line of text but don't have the necessary space, this little code snippet made in CSS can do wonders for you. It allows you to create a marquee that scrolls text on hover, gradually upping the speed as you keep it pressed. This pen was created by Ren Walker.

      • 3D Thumbnail CSS Hover Effects

        A useful and complete Codrops tutorial is going to explain you an amazing set of techniques used to create appealing hover effects on a set of images. When touching the cursor, CSS 3D transforms are triggered, "bending" the image and revealing hidden information behind them.

      • Spinning Logos Fading CSS Effects

        A code snippet with spinning logos, perfect to animate a website or a mobile app. On hover, the jQuery logo spins and fades out while the jQuery-ui logo fades in. When you move your mouse out of the logo, it happens the same but in the opposite direction. You can edit the code to make it even more functional than the original.

      • 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