CLOSE
    A growing repository with 722 bundles & 9578 resources for web ninjas
    (freebies, plugins and snippets) updated & curated every day, so it never expires.
CLOSE
    • CSS Background (29 submissions)

      Bring your website to life by applying CSS backgrounds with multiple effects and animations, using HTML5 and CSS.

      • Static CSS Animated Background

        A really cool Codepen snippet that generates a "static" effect, you know, like those we used to see on our TVs when the signal was dead. The effect was created with CSS and JavaScript, and it was made by Zach Green.

      • CSS Gradient Background

        A gradient background done entirely with CSS. The code doesn't have more than 10 lines, and it manages to create a great gradient that will take less space than an image. It was created by Bruno Braes.

      • CSS Background Pattern

        A nice background in pure CSS. It uses linear gradients to differentiate among bricks. The code is not heavy at all, easing its inclusion in a website or other digital works. Use it freely; the code was written by Joshua Hibbert.

      • CSS Grid-like Background

        A friendly grid-like background in pure CSS, perfect for all sorts of web projects. The code can be modified in no time, and you can use this snippet for personal and commercial works. The code was uploaded to Codepen by user disjunto.

      • Diagonal Line CSS Background

        A clean CSS background that divides the screen diagonally. The code is really simple and you can use it on any commercial or personal website to give it a little personality. The snippet was made by Codepen user Jdias.

      • CSS Background Gradient Clipping

        A nice and colorful background effect made with CSS. The beauty of this snippet is that it creates a gradient that you can see on any text in which this effect is applied, no matter how long it is. The snippet is really small. Sandesh Damkondwar created it and uploaded it to Codepen.

      • CSS Background Gradient Pattern

        A zigzag pattern made in CSS by Codepen user Jim Hall. Its most common use is as a background on any website or even in other types of creative work.

      • Diagonal CSS Background

        A diagonally-striped and simply created background made in CSS, a pen that can be used in any project (commercial and personal). It has a light composition, very few lines of CSS and it can be implemented easily. It was created by Codepen's user Vincent.

      • Skewed CSS Background

        A nice way to create a skewed background done with CSS. It is a pen inspired by a pen made by Marcel Kasiokiewicz, with the only difference that this one has a fixed navbar with a shadow on scroll. The pen was made by Matthew Craig.

      • CSS Dark Chain Background

        A chained background made in CSS. It is based on Lea Verou's CSS3 Patterns. It just needs a few lines of CSS to be created and it can be integrated anywhere, both personal and commercial projects. The snippet was made by Peter Schmalfeldt.

      • CSS Arrow Background

        A beautiful pattern made in CSS that can be used as a background. It is a simple creation, yet it delivers a really nice result, showing diagonal up and down arrows. The script takes only a few lines of CSS and it was made by Peter Schmalfeldt.

      • CSS Zigzag Background

        A colorful background made in pure CSS. It is incredibly lightweight, actually, this snippet takes only a few lines of CSS to deliver an acceptable zigzag background. It could be improved, of course, to make it smoother. It was made by Peter Schmalfeldt.

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

      • CSS Brushed Glass Background

        A simple concept for a background image, very similar to Windows' brushed glass Aero effect, styled with pure CSS. Although the effect is extremely subtle, it is very smooth and adds a bit of dimension to a flat background. Uploaded to CodePen by Ade Arwans.

      • Transparent Text CSS3 Background

        An amazing effect brought to life with some HTML and CSS. It features a moving background image that can only be seen through a completely transparent set of letters, creating a fantastic illusion and bringing all the attention towards the text. This was created by JSFiddle user girlie_mac.

      • Selectable Text CSS Transition

        After creating an amazing transition effect starting from an image, Trent Walton was challenged by a user to repeat the result, but this time allowing visitors to highlight the text. Happy to comply, here we have his finished work, now with the aforementioned selectable text. Bear in mind it only works with WebKit browsers.

      • CSS Photographic Bokeh Pattern

        A delightful technique for creating the effect of photographic bokeh without any images. It is a little heavy, but it surely provides a convincing result that will surely catch some looks from visitors. This code snippet was created and uploaded to CodePen's by user Jack Rugile.

      • CSS Canvas Wall Pattern

        An awesome background design with multiple circles filling the screen completely, based on a painting seen in the streets of New York. The pattern creates some sort of “cloud” effect with very light lines, in order to not overload the view. Created by CodePen’s Tim Holman.

      • CSS Dark Noise Pattern

        A code snippet that applies a noise effect all over the background, which brings it out a bit without making it stand out too much in comparison to other elements within the web project. It was completely styled with CSS by CodePen's user Joshua Stearns, who uploaded the code.

      • CSS Pretty Grey Background

        CodePen's user reza brings us this neat background design featuring a radial gradient coming from the center of the screen. Everything is created by applying only CSS (Sass), so if you want to make any modifications make sure to grab the code and improve it.

      • CSS SVG Background Image

        Yet another SVG background image project featuring a neat texture made in CSS. This time, we get multiple lines going diagonally across the design providing a very subtle effect that makes the background less plain, without gathering too much attention. It was created by CodePen's user Alex.

      • CSS SVG Background Images

        The final result of this project displays an amazing background image that combines a violet-to-blue diagonal gradient with a set of lines going across it, generating an impressive effect that is guaranteed to stand out. Created and uploaded to CodePen by Philip Rogers.

      • Light SVG Background Image

        A project that provides a background image with SVG, incorporating a very subtle texture over a solid white base. It makes use of HMTL, CSS (LESS) and JavaScript to function, while the SVG is encoded as a base64. It was created by CodePen's user Phillip Rogers.

      • Dark SVG Background Image

        Phillip Rogers from CodePen came up with this idea for a texturized background combining HTML, LESS and JavaScript. It features a dark gray base with black holes organized diagonally, creating an attractive effect and giving a bit more profile to an otherwise uninteresting image.

      • Noisy SVG Background

        A nicely styled background image created with HTML, LESS (a variant of CSS) and JavaScript. It features a noisy texture, creating an illusion similar to sandpaper, bringing out the background. This code snippet was designed and published by CodePen's user Phillip Rogers.

      • Awesome Canvas Live Background

        A magnificent live background that displays groups of animated squares that fade in and out of the frame, reappearing in random places. Also, particles follow the movement of the mouse. Created by CodePen's user Eryk Napierała, this project takes full advantage of HTML5 Canvas.

      • CSS Light Live Background

        A simple code snippet designed by CodePen's user Jérémy Barbe. It provides a simple background made in CSS with underlying lines, creating an interesting pattern that can be useful for organization and alignment purposes (you can see these lines by highlighting the design).

      • Set Canvas As Body Background

        This little code snippet serves as a demonstration for a Coderwall article that shows how to set canvas elements as body background in your projects. This example applies a subtle noise effect in order to provide a little bit of texture. Created by Jack Rugile and uploaded to CodePen.

      • CSS Background Grid Lines

        This code snippet provides a grid background created with pure CSS3 that can be quite useful for organizing elements precisely into specific dimension or just to give a little bit of dynamism to the showcasing of a project. Created by Jason Delia and uploaded to CodePen.

      • Collapse Expand List View all items Download Bundle Submit
    • Pure CSS Web Elements Effects (38 submissions)

      List of effects applied to sites with CSS3 elements.

      • SVG Image Filters CSS Snippets

        A growing set of CSS filters for images. The filters you can find are saturation, hue, luminance, sepia, distort, matrix and more. With it, you can adapt the photographs to match the style of your site, like giving them a vintage or an old style.

      • 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

      • CSS Animated Effects Navigation

        A collection of various CSS hover effects for texts and links. The effects are really simple and they have been inspired by a Codrops article. There are 15 effects here, you can choose the one that adapts to your site. The code can be used personally and commercially.

      • Different CSS Button Hover States

        A set of buttons in CSS and HTML including 10 different states like center-out, left to right, top to bottom, skew fill, flexible grow, scale, radius, inner and outer shadows. The code is really lightweight, and you can easily implement and style each button to fit your needs.

      • CSS Filter Effects Online Tool

        A set of nice filters made in CSS for creating effects like blur, brightness, contrast, grayscale, opacity, saturation. Each effect easily gives you the option to grab the respective CSS code to apply them to your images. Although it is experimental, it is quite handy at times.

      • Colorful CSS Button Effects

        A cool set of CSS animations for buttons. The animations include border effects and fillings in different colors. The code used is really simple to integrate on any website and it doesn't use any JavaScript. It was created by Chris Deacy.

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

      • Stunning SCSS Hover Effects

        A compelling set of 10 hover effects made in SCSS. The effects represent different aspects of technology and life like travelling, nature, architecture, animals, cities and more. They are lightweight and can be integrated into any project, personal or commercial. All credits go to Renan C. Araujo.

      • Animated Material CSS Loading Button

        A beautiful, animated button made in CSS that once you click it, it transforms into a loading bar, and then into a confirmation button. It has a material style, and doesn't require much time to integrate into your website. Created by Bhakti Al Akbar Pasaribu.

      • CSS-only Material Design Buttons

        A set of animated material design buttons made in CSS, including effects when the user clicks and hovers. This buttons can be implemented easily on any website and you can modify the code at will. This snippet is free and it was made by Jon Brennecke.

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

      • Pure CSS Stylish Hover Effects

        A set of ten hover effects for multiple purposes. The effects included are scanning, piano, burn, movement, comet, bent, bridge, wrecked and beat. It's a free code snippet, ready for implementation and created by Renan C. Araujo.

      • Playful JavaScript and CSS Trampoline Effect

        A beautiful plugin made with JavaScript for creating a simple trampoline effect that can be applied to any element, especially great for galleries image showcases. This plugin comes along with an article where Mary Lou explains us the creation process.

      • Bounce.js: CSS3 Animations JavaScript Library

        Bounce.js is a simple JS library that lets you create CSS3 powered animations. With it you can add spins, jelly and clock effects, road runner motion and many more to any element on your website. It was created by Tictail.

      • Animated CSS Twitter Button

        An animated button for Twitter made in pure CSS. It was created having in mind the material design trend and its characteristic animations. It is perfect as a standalone element, but it needs a little tweaking if you are going to integrate it with other social networks. It was created by Scott Marshall.

      • Easy CSS Mask Textures

        A code snippet with some mask effects made in CSS that makes the text look vintage. It is a simple effect that does not need any JavaScript and is easy to implement. It was created by Jeremy Frank.

      • CSS Navicons Transformation Snippet

        A menu made with navicons that transform when clicked. The icons start as the regular stack icon for "menu", but once clicked it turns into arrows (pointing three directions), a cross for closing, a plus sign for adding and a minus sign. It was created by Bennett Feely.

      • Cool CSS3 Link Effects

        A set of effects for links made in CSS3, including left to right, right to left, start centered, different top and bottom options, cool square and more. You can integrate these link styles in any project and modify them if you want. The effects were created by Brenden Palmer.

      • Animated CSS Dialog Effects

        A set of effects for modals created with CSS. They animate thanks to CSS transforms and animations that are supported by several modern browsers, and some effects use SVG animations of morphing paths with the help of Snap.svg. The resource is free and it comes with an article explaining the process.

      • 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

      • Axis: Web Elements Styling CSS Library

        Axis is a CSS library built on top of Stylus. It is an extensive library, but it doesn't require any additional knowledge besides the one you know of CSS. This library doesn't override any of the existent CSS, which gives you the confidence to use it without worries. It is ultra lightweight, and it works as an enhancer for the regular CSS. You can apply Axis to any element, but it works great in: - Typography. - Tables. - Elements for creating gradients. - Forms. - Buttons. - UI elements in general. It was created by Jeff Escalante. You can use it freely in any web development, or …

      • Error Monkey: Fun CSS 404 Page

        An error monkey is a beautiful way to tell your readers that they have reached a dead end on your website in a fun way. It is pretty simple, yet has a nice illustrated monkey that can actually be animated with easy CSS tweaks. It can be complemented with a search and texts to indicate a way back for your audience. Also, it replaces the cursor with a banana.

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

      • Inner Shadow Typography

        An experiment that replicates Photoshop's inner shadow layer style by using CSS3 plus Sass (with Compass). It is also very easy to change the color of the design thanks to a $change-me variable that just requires us to enter the color we desire. Created by Andrew Boyd from CodePen.

      • Masked Text with texture

        Daniel Riemer from codepen.io has published this amazing freebie where he's pretending to make an stamp text effect applying texture to the text with alpha png and css3 mask-image css techniques.

      • Sliding Door Hover Effect

        Here we have a set of elements similar to closed airplane windows with content hidden underneath them. In order to "open the windows" and check what's behind them, the user merely needs to hover the mouse over them. This triggers a nice CSS animation that reveals the material. Created by CodePen's Ana Tudor.

      • A Blue Background and Text Shadow Integration

        Katy DeCorah comes again surprising us with this text effect that integrates well with the bacground apparently made with CSS properties too.

      • Lined Shadows Text Effect with CSS

        The base64 encode pattern technique and background clip CSS property is used by Tim Holman in this freebie to create this interesting text effect without wasting no more than 15 code lines and applied to any font family and any text.

      • Pure CSS 3D Perspective Portfolio

        A CSS image gallery with some 3D animations and transition effects when we hover over each element. The animation allows to see the thumbnail description in a black box. This design is perfect for designers and animators who need to showcase their work.

      • Fly in, fly out

        Neil Carpenter share with us a funny text animation where the characters fly to the center and out of it. Besides, when the letters are not in the center, they are transformed into fuzzy circles. The transform of the characters has a bug if you are using IE 10; in Firefox the animation is very slow, but in webkit browsers like Chrome it works perfect.

      • Mirror Effect

        CSS3 mirroring effect achieved with the Transform module.

      • Simple CSS Split Text

        Split real-life text in twain, reveal some stuff inside. Could probably done with less code and not have the crazy FUC, but I've only got so much time this morning to get this out of my head so I can get on to real work.

      • Pure CSS3 Bouncing Dribbble Ball

        I created this logo using some basic and advanced CSS3 properties like transforms. The main trick here is that all the elements have borders and they are rotated and scaled in X-direction to give an oval shape.

      • CSS3 Isometric Text

        This 3D text effect was made with 2D transforms in order to keep cross-browser compatibility. These transforms are applied to both the content and the title, with the latter receiving two shadow effects in order to give it its 3D look. Created by Duncan Midwinter.

      • Fancy & Pushable CSS 3D Button

        A flat button that has been styled using only CSS shadows, to the point where it now has a 3D appearance. Shadow is applied on the button itself to give it dimension while the background has a more typical effect. When the button is clicked, animations provide a smooth "push" illusion.

      • Large Pressable CSS3 Navigation

        Navigation with large pressable buttons that animate nicely by David Hellman. The CSS is pretty simple to understand, the background of the menu is just a linear-gradient and the pressed effect is created using the box-shadows on both :active and :hover states.

      • Pure CSS Folded Corner Effect

        A subtle effect that allows you to display the image and then have a corner fold whenever the reader hovers over the element. It uses span elements instead of :before and :after pseudo-elements in order to ensure compatibility with multiple browsers. Uploaded to CSS Deck by Rishabh.

      • Masked Text-Shadow

        Using the CSS3 mask-image property to create a striped text-shadow (Webkit-only). …

      • Collapse Expand List View all items Download Bundle Submit
    • Flat WordPress Themes (23 submissions)

      This list includes useful and beautifully designed flat WordPress themes for any sort of purposes.

      • SKT The App: One-page Free WordPress Theme

        A responsive and multipurpose flat WordPress theme for apps showcase. It is perfect for corporate, business, personal, blogging, photography, consultancy and more, with the purpose of showcasing a product or a mobile app. It is also a one-page WordPress theme with various sections nicely crafted. It is compatible with major WordPress plugins like WooCommerce and Contact form 7.

      • Free Interior Store WordPress Theme

        A sleek flat interior design WordPress theme that also supports e-commerce since it has full integration with WooCommerce. The theme is flat, with an outstanding design, custom layout and professional photographs as a complement. It is easy to install, to edit and use and it was built under the Cherry framework.

      • The Funk: Free Flat WordPress Theme

        A responsive flat theme for WordPress with customizable layouts and colors from the Theme Customizer. It includes logo area, top menu, another menu, blog area, widgets, footer and more. It can be used for blogging and writing occasionally, and it was created by Hardeep Asrani.

      • Ariwoo: Flat Startups WordPress Theme

        A clean and multi-purpose WordPress theme for companies and Startups. It has a flat design, complemented with images and photographs for it to be more impressive. It has a big slider, services area, projects, about, team, blog, clients, contact and more. It was created by Arinio Themes and it's free to use.

      • Fontana: Flat Blogging WordPress Theme

        Fontana is a clean theme for WordPress specially crafted for blogging. It has the basic layout for a blog, with posts on the left side and widgets on the right. It includes a menu, flicker and video widgets, and other areas for including tags and recent posts. This theme is free.

      • Mixed: Free Multi-purpose WordPress Theme

        A powerful multi-purpose WordPress theme for corporate sites, blogs, music bands, e-commerce, forums and more. It has integration components with bbPress, BuddyPress and WooCommerce, and an HTML5 and CSS3 design. It is translation ready, responsive, retina ready, includes Google Fonts and more. The theme is free.

      • Maskitto Light: Flat Responsive Portfolio The...

        A beautiful flat WordPress theme for portfolios and small companies. It has a one-page layout, although each page can be viewed individually. The theme includes menu, big image slider, title, caption and action button; features area, about us, portfolio area with thumbnails, blog with a masonry style, contact, map and more. It is free.

      • Awaken: Free Flat Magazine WordPress Theme

        Awaken, a nice flat and responsive WordPress theme, is composed of a main menu, slider, content area and footer widgets. The theme has a simple design so the users can focus their attention on the contents instead of distracting elements. It was created by Pubudu Ranjan.

      • Flatfish: Flat Child WordPress Theme

        An ultra-flat child theme for WordPress. Since it is a child theme, you'll need to download the Flounder theme before. This is a minimally styled theme for bloggers with colorful design and support for several post formats. It takes all the good stuff of Flounder, adding some great capabilities. This theme was created by Michael Arestad.

      • Intergalactic: Free Flat WordPress Theme

        Intergalactic is a neat WordPress theme made especially for blogging and writing about space issues. It has a single column layout and simple navigation to access any part of the site easily. Also, it includes several images in HD, and it gives your content the relevance it needs. You can use it personally and commercially.

      • Blogghiamo: Metro-Style Blog WordPress Theme

        A free Metro-inspired theme for bloggers and occasional writers. The theme has a clean style, it's responsive and it lets the user focus on writing instead of worrying about design. It's organized and includes various widgets like calendar, recent posts, archive and others. Among its features, we can find a responsive design, background change, unlimited text color, social icons, and share buttons.

      • Nulis: Free Single Column WordPress Theme

        Nulis is a clean single-column WordPress theme. It was crafted to keep your content highlighted, making it stand out thanks to abundant white space, striking featured Images and strong typography. This theme includes: - Theme options - Tablet & Mobile friendly - Post Formats - Large Featured Image - Personal Logo - Social Links - Custom header color - Header Background - Profile Panel - Custom Menu - 3 Widgets Area - Translation-ready The theme is free and it was created by WordPress user supakunza.

      • Life Is Good: Flat WordPress Theme

        Life is good is a simple WordPress theme created with a flat style. It is focused on content and it maintains a clear appearance, uses nice typography and compelling imagery to make it appealing. The theme is free for personal and commercial use and was created by Daniel Klose.

      • Wilson: Blogging WordPress Theme

        Wilson, a creation from Anders Norén, is a clean and responsive theme that can be used in personal websites and blogs. The theme has a lateral menu that gets fixed to the top when it's viewed from a mobile device; it also has flat buttons with transitional effects and more.

      • Shop Front: Free Shopping WordPress Theme

        A compelling WordPress theme with very basic settings for you to create an online store. The theme is GPL licensed, it has integration with the Easy Digital Downloads plugin, is fluid and responsive, includes some add-ons, lots of features, you can preview changes in real time, has automatic updates and support. You can download for free and use personally and commercially.

      • Roda: Free Wavy WordPress Theme

        Roda is a WordPress theme for personal bloggers, especially those who want to keep a personal diary. The theme has a simple flat design that you can complement with images and photography. It includes social icons for easy sharing, a responsive menu, "about me" area and contents area.

      • Everal: Modern Responsive WordPress Theme

        Everal is a retina ready WordPress theme in which all the theme graphics scale beautifully on high definition screens. The theme includes crafted elements like a top menu, big slider, search, calendar, recent posts, blog area and more. It can be used for blogging or as a portfolio. It is also compatible with the WPML.org plugin.

      • Flato: Blue Flat WordPress Theme

        Flato is a simple blogging theme with a flat design and blueish color variations to provide a calmed or relaxed feel. It is responsive, with theme options and four widgets in the footer. Also, it includes a top menu with dropdowns of several levels, a search button, logo area, and various elements like headings, blockquotes, tables, definition and nested lists, HTML tags and more.

      • Flounder: Free WordPress Theme

        A flat, simple theme for bloggers and news generators, featuring fresh shapes and smooth colors for a more attractive web. It includes widgets for content, icons for identifying components, heading and lists styling, forms, tables, quotes and more. The menu is located at the top, and it's fixed, but when you view it on a mobile device, the menu goes down to the bottom.

      • Sorbet: Personal Blog WordPress Theme

        Sorbet is a colorful theme that can be used in any way, but preferably on personal blogs or magazines. The design is completely mobile-friendly, and it looks great on any device, highlighting the very best of your content. Sorbet will give your website a modern yet fun new look.

      • Hexa: Writing WordPress Theme

        Hexa Theme is an attractive approach to website design. It has hexagonal forms as menu, and when you activate them, the options appear on the top. The options on the menu are a top list, the search, some settings and the social sharing icons.

      • Writr Blogging WordPress Theme

        Writr is a nice content-oriented theme for WordPress that can be used as your personal portfolio, blog or even a magazine for your entertainment, it is responsive, with optimal views for different devices. It also includes several icons for you to use in any type of content. The theme is free.

      • Moments Bloggers WordPress Theme

        Moments is a compelling blue and black theme created specifically for news and blogging, giving it a contemporary look, so it looks fresh and updated. It has a relevant header, which includes a menu, widgets and more. It can show videos and music files as featured components in the home. It is free for you to download and use.

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

Done!

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

Browse
Done

Thank You!

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

Open bundle builder

Bundle Builder

0 elements selected | Clear all ×

Select the bundle you want to add the items to.

Search bundle (filter by name)
Create new bundle
×

Add new bundle

×

Edit bundle