Free ResourcesFree Resources
Free material and tools from all over professionally curated for you.
      • Fontjoy: Font Pairing Tool

        The goal of Fontjoy is making the process of finding fonts that match with each other in a visually appealing way easier than ever. Features 3 fields where you can input text and choose fonts to test, or simply use the slider to control the leve...

      • Choose Your Font is a tool that helps find the right font for your texts. The tool has the option to change the size of the text previewed and filter the selected fonts.

      • Brick: URL Font Library

        Brick is a font library that provides font URLs to apply to a website. Every font has several different design options. It was built to be easy-to-use. The URL formatting rules are similar to those at Google Fonts.

      • modulator: Font Modulating Online Tool

        A simple tool for modulating your fonts for any web project. With the modulator you can modify the anatomy of the font, the glyph, the mode, setting, unit width, pen width, cap height, bar height, ascender height, descender height, x-height and ...

      • Online Handwriting Font Generator

        An online tool that allows you upload a document and transforms the text into a more personalized one to give it a personal look. You can use your own handwriting as if it were installed in your computer. This service is free.

      • Type Genius: Online Font Match

        Type Genius is a simple yet powerful online tool for editors: it allows you to select the best font match for another font you wanna use on your website. It gives you three options and examples in real websites so you can see how they work. You ...

      • Collapse Expand List View all items Submit
    • A collection of multiple material design buttons, including animations and related colors to follow the regular Google guidelines.

      • Material Design Web Components

        Comprehensive bundle of UI elements and components, completely modular and fully customizable. It's a project regularly maintained and updated by Google designers and engineers, with easy to implement, pixel-perfect components for Android, iOS &...

      • CSS & JS Toggle Navigation Buttons

        A code experiment with SVG icons for website navigation. It consists of buttons made with CSS and JavaScript that change color when selected. Also, it has Material transitions to make it look dynamic.

      • CSS Material Multi-button

        A pure CSS multi-functional button that pops up of a single button from a checkbox. It uses event triggers, and the whole thing has a Material style. It works in most of the newest browsers but it looks better on Chrome. This code is free to use...

      • CSS Simple Hamburger Menu Icon

        A simple button made in CSS for a menu icon. It is animated, so when you click on it will turn into a notification. It has pastel colors yet they can be modified easily. This code experiment is easy to implement and was developed by Gerta Xhepi.

      • CSS Selected Radio Button

        This simple CSS code experiment shows a set of radio buttons in a Material style and one of them is selected. It only uses a small chunk of CSS and HTML to deliver a nice animation. Colors and even the shape of the radio buttons can be altered t...

      • CSS Animated Voting Buttons

        A pair of buttons made in CSS, one for upvoting and the other for downvoting. When clicked, the buttons show a wave effect and change their color. The code is lightweight and ready to implement. This pen was created by user Valeriya.

      • CSS Animated Send Button

        A very appealing CSS button that serves for purposes of send or submit actions. It becomes a loading bar once you click it, and when it finishes it becomes a success button.

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

      • Collapse Expand List View all items Submit
    • List of effects applied to sites with CSS3 elements.

      • CSS & JS Expanding Card Page Transition ...

        A cool CSS and JavaScript transition effect that can easily be implemented on any website. The transition can be used for sliders and other types of elements on the site, like cards (like in the example).

      • Pure CSS On-hover Atom Button

        A cool button effect made in pure CSS resembling an atom when hovered over. The button can be implemented easily, using just a few lines of CSS. Add a simple link to the div and you have a functional button for your site or app.

      • Background Segment Effect: CSS Motion Animati...

        The Background Segment Effect is an animation done with the CSS clip-path property and powered by anime.js. The effect replicates boxes from a background and makes these boxes move in perspective towards the viewer.

      • Perspective Text CSS Hover Effect

        This snippet generates an unusual hover effect that gives the text a unique look. Crafted in pure CSS the perspective effect is created by rotating the text in certain degrees and make it scroll upwards.

      • Lined Shadows CSS Text Effect

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

      • CSS Cinema Effect Snippet

        A snippet featuring a cinematic effect for HTML pages using CSS. It takes advantage of the WebKit extension's entity animation and its properties grain and scratch in order to create this effect.

      • Pure CSS Image & Video Reflection

        A reflection for images and video made in pure CSS. It has countless applications, and the size of the mirror effect can be altered to fit any web or mobile project. Also, it uses the -webkit-box-reflect attribute to work on webkit browsers prop...

      • Draggable Filter-less Blurring Box

        A CSS filter-less technique for creating a box that blurs the background image on the area that the box occupies as you drag it around the viewport, it has the two images (normal and blurred) loaded on the website, only showing the part of the b...

      • Sticky Elements

        CSS and JavaScript resource to make links, buttons and even plain texts stick to your mouse. You can modify horizontal stickiness, vertical stickiness and duration with control bars.

      • Expanding Contact Form

        CSS contact form with a fun and simple expanding effect from a circular shaking pen logo, it comes in a vibrating red color, but every aspect is completely customizable.

      • CSS Photo Filters is a online image editor to create custom and Instagram like photo filters in css. Upload your photo and modify it from different aspects like brightness, saturation and background color, among others. You can also modify it from c...

      • CSS Step By Step Process

        Step by step process sign up boxes featured in a smooth and colorful but clean design. The "Step By Step" pattern is usually 100% developed with JavaScript but you can use CSS too.

      • Magnetype: SCSS Text Effect Snippet

        A compelling effect for texts made in pure SCSS. Its main idea is to create a diagonal glowing effect over a set of letters. It uses keyframes to animate letter by letter. The code is lightweight and can be used in web and mobile designs.

      • CSS Stack Overflow Animated Logo

        A fully animated snippet created by Johan Lindell featuring the Stack Overflow logo with a nice rotating and animated transition. The logo was crafted in pure CSS.

      • CSS Shake: DOM Elements Smooth Shaking CSS Ef...

        CSS Shake is a set of classes perfect for animating any kind of DOM element. The shaking effects have different intensities, and you can mix them with other effects like opacity. With it you have basic, slow, little, hard, fixed, constant shake ...

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

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

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

      • 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 that reveals its items once the button is clicked, laying backwards the page content.

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

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

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

      • CSS & JavaScript Flipping Button

        A beautiful button made with CSS and JavaScript that transforms into a confirmation box, with additional buttons. The cool thing about it is that it flips accordingly to the side it's been pressed. This button is flat and you can use the code in...

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

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

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

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

      • Pure CSS Ribbon Badge

        A pure CSS developed badge made out of ribbons that allows you to feature a text inside it, perfect for featuring awards and prices.

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

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

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

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

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

      • Masked Text with texture

        Daniel Riemer from 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 anim...

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

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

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

      • Mirror Effect

        CSS3 mirroring effect achieved with the Transform module.

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

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

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

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

      • Masked Text-Shadow

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

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