100+ Useful CSS and JavaScript Snippets

These free code snippets are perfect for anyone who wants to forge ahead into the wilderness of cutting edge CSS techniques.

Each snippet uses CSS to create something which pushes the boundaries of modern web design.

Feel free to copy any of these snippets into your own work or even try building your own ideas referencing these examples as a guide.

CSS Animated Navigation Menu

Breadcrumbs a neat navigation solution by dribbble user John Wilson, created as a custom navigation solution for Envy’s Ivy app. As the user approaches the top left back button, the breadcrumbs expand and allow the user to navigate to different parts of the site/app. Pen uploaded by codepen user Andreas Storm, the snippet is made in pure CSS.

 CSS Responsive Book Layout

A responsive skeuomorph book layout made in CSS by codepen user Erin E. Sullivan, this book layout comes in packed with fun features to discover. It is lightweight and easy to work with. Snippet completely free for use.

Full-screen background videos can be a powerful feature to have on a website, and, through the power of CSS, Codepen user Dudley Storey has created a neat snippet, complete with directions and recommended practices in order to implement this visually engaging feature on your website.

Created by Codepen user Jamie Coulter, this is a snippet for a pure CSS menu with smooth drop down animations in a similar fashion to accordion menus. A great addition to any non-JS user interface.

Pure CSS Content Slider

Amazing pure CSS slider created by Codepen user Damian Drygiel, within the slider you can scroll to view larger images or text. A great alternative solution worth taking a look at!

3D Perspective Carousel (CSS & JS)

A neat and responsive 3D perspective animated slider, created in CSS and JS by Codepen user Alex N with cues from Rachel Smith. The snippet consists of an image slider/carousel that, along with a discrete parallax effect on the image, has a smooth transition that, on click, takes you from one image to the next through a nice looking animation effect.

 Javascript Auto-Type Snippet

A nice and lightweight JS snippet by codepen user Tommy Dunn, its name says it all: it creates a cool auto typing animation, easily customizable and implemented.

CSS Checkbox Styles

Nifty CSS3 Checkbox Styles created by codepen user Brad Bodine, functional and stylish, with a short and lightweight code for easy implementation.

Place Order Progress Bar/Steps (CSS)

Made by Codepen user Jamie Coulter, this is a code snippet for a neatly designed and animated order/process bar here where you can click on the different steps and be presented with information. The animation on the box at the top changes depending on which step you’re currently viewing.

CSS Parallax Flipping Cards

Created by Codepen user Tyrell Rummage, this CSS and HTML snippet makes awesome looking Parallax Cards which flip from right to left when you hover the mouse pointer over them.

CSS Animatied Subscription Box

UI box is a lightweight CSS animated interactive subscription box. This is an easy to test and implement feature and the snippet was uploaded to Codepen by user Chouaib Blgn.

CSS 3D Panel Tilt Effect

A cool and lightweight CSS 3D tilt effect created by Codepen user Peter Barr, the panels interact with the mouse position and follow it, tilting the image as you move the pointer through. Desktop only!

Before/After 3 Layer Image Slider

This is a neat CSS and JS code snippet for making a before-after layer slider that allows up to 3 states to take advantage of. Created by Codepen user Huw.

Contact Me Animation

Based on dribbble users’ Riccardo Cavallo contact animation, this CSS snippet uploaded to Codepen by user Aaron Taylor is a neat piece that deploys different options for contact upon interaction.

Image Slider Motion Blur Effect

This is a neat experiment that simulates a motion blur effect every time a slide is switched in a carousel. It takes advantage of SVG Gaussian Blur filter and some CSS keyframes animation. Snippet created by Codepen user Damián Muti.

CSS Loading Fidget Spinner

Fidget spinners are quite popular these days. This one is a neat CSS loading spinning gizmo with a realistic effect. It spins in both directions back and forth. This snippet was made by Codepen user Tomi Sjöblom.

Follow Along Links: Javascript

Javascript code snippet that creates a highlighting effect when you hover on links, the effect then follows the cursor, highlighting the links as you go.

CSS Color Blend Mode Text on Image

A snippet that allows for fun text on image color blending with amazing and visually appealing results.

CSS Neon Shimmering Text

A CSS snippet published by codepen user giana, allows creating nice, animated shimmering neon effects for text.

Font Combinations Randomizer

This utility created by CodePen user Mert Nerukuc is an interesting snippet with the purpose of generating random font combinations with samples taken from google fonts. Simply choose a Heading and a Body font category ranging from Serif, Sans-Serif, Monospace, Handwriting or Display. Built with Vue.js, it’s designed to be adaptable and easily integrated into projects that use other JavaScript Libraries.

Tesselation and Gradient Transition Effect in JS/CSS

A nice tesselation transition effect created by Chris Johnson, based on Delaunay Triangulation in order to create visually appealing and randomly generated color transition gradients and tesselations in the style of Material Design. This jaw-droppingly beautiful JS/CSS snippet can come in handy for photo galleries or header effects.

CSS & JS Expanding Card Page Transition Effect

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 Masonry Layout

A purely CSS crafted Masonry layout including 3 columns featuring images as well. This CSS layout includes a nice hover-highlighting effect on each title adding great style to them.

Material Design Responsive Modals

Built with Stylus and JavaScript, this set of Modals features a smooth zooming animation in which we can incorporate text or images, these modals are fully responsive as well.

Modal Blur Effect Snippet

Featuring a nice and fluid animation, this blurring effect is perfectly crafted as it can be used on any modal to add excellent visuals on buttons.

CSS 3D Button Snippet

A totally CSS based button featuring an smooth pressing animation when clicked. Featuring an stylish flat design, this button is an ideal choice for any site.

Drop Down CSS Menu

Dropdown menu crafted in pure CSS, with hovering effects for each category and using labels to trick the toggle animations, it also allows multiple categories to be displayed at the same time.

Material Design Responsive Cards

Informative material designs cards containing animations for the transitions between the cover and the card info. Crafted using CSS for the templates and JS for the transitions and the buttons animations.

Scalable Scroll CSS & JS Footer

This footer hides at the bottom of the page, but as the user scrolls all the way down the end, the content above will be resized both wide and height, showing the footer and its content. It uses both CSS and JS.

Modern Responsive jQuery Sliders

CSS-based responsive sliders handy for crafting unique designs within web pages, the sliders’ colors are easily customizable, and a counter can be added to the marker for the sliders’ selection location.

Button Hover Effects Collection

A showcase of different button’s hover effects within an HTML & CSS codification, 5 different and smart effects made using transformations, rotations and transitions.

Snippet – Responsive Navigation Ideas

Showcase of menu deploys animations within devices mockups, mainly build using CSS, HTML and a little of JS. The mockups are modeled after iOS devices and the animations of the menu button change from an example to another.

Pure CSS Favourite Button

This useful snippet uses HTML alongside pure CSS to create an animated share button. The hover and click animations can be edited using the ‘transform’ parameter in CSS, as well as the heart icon and the hover text.

Animated CSS & JS Login Form

This material and compact login form snipped was created using CSS and JS. It has animations for the activation of the fields and the ‘go’ button, also has a smooth transition animation to the register form by clicking the ‘add’ button.

Color Changin’ Snippet

This useful snippet created using pure JavaScript with little to none HTML or CSS use. It is a background color changing with a transitional effect, by clicking the screen an effect of bubble explosion will trigger the color to change.

CSS & JavaScript Gallery Transition Effects

A snippet of a gallery created using CSS and JS; the images are called using Java and displayed within a grid with CSS, the items lighten with a hover, and by clicking them the image will be displayed along all the grid.

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.

Transformable Material Design Card

A smoothly transformable Material Design card styled with basic styles and card modifiers Less that are triggered with JavaScipt as you click on each of the titles, smoothly changing the card shape and layout, as well as the viewport’s background color.

3D SCSS Material UI

A pen created by Nathaniel Watson that shows a Material user interface for mobile devices, and it is made in SCSS with a 3D effect. It is the extension of an earlier creation intended to visualize the ‘Elevation’ in Google’s design guidelines. This elevation has been exaggerated, but it’s totally editable to achieve more accurate values.

SVG Path Transformer Snippet

An interesting snippet applying advanced CSS transforms on SVG paths for animation purposes by computing the actual transformed path.

jQuery Static Text Scroll

This snippet will show static text as you scroll along the page, matching the image that is on the screen with its description placed on the right side.

CSS LCD Text Effect

It’s written as a pure CSS to give your fonts a mid 80’s science fictional look. It uses a pixelated background alongside a gradient effect to obtain the digital-like look.

JavaScript Inbox Refresh Scroll

Useful sample for JavaScript that adds a scroll in order to update the inbox notifications by drag & dropping. The interface is also made for the user to play around while checking the mail with the implementation of smooth animations.

SVG Animated Icons Snippet

An awesome snippet featuring 5 groups of SVG animated icons, and in this case health related ones, showcasing a fantastic entrance, a vibrant smooth close-up as well as a shadow while hovering over them.

Animated App Navigation Concept

A great snippet featuring an interesting concept of app navigation, which comprises a menu button that showcases an accordion with sections that appear one after the other.

Background Colour Scrolling Animation Snippet

A snippet featuring a background colour that changes with smooth fade animation while scrolling either down or up, it also includes clear commentaries within the JavaScript.

Squishy & Shadowed CSS Buttons

A nice duo of two CSS buttons that integrates a subtle yet great looking squeeze-like animation when pressing each one of the buttons. This nice creation was crafted in pure CSS.

jQuery Blurry Lens Effect

An attractive code snippet featuring a hover animation with a blurry lens effect. Purely crafted using jQuery making it a cool and attractive choice to integrate with interactive sites.

3D Products Slider Code Snippet

A cool snippet featuring a 3D circle slider that rotates sideways depending on the clicked arrow, showing several products, a perfect feature to include in your site.

3D CSS Dynamic Shadow Snippet

A fantastic snippet featuring a 3D dynamic shadow which changes with a light bulb that we can move with the mouse, creating different perspectives using CSS and Javascript.

Material Design jQuery Datepicker

A snippet made in jQuery featuring a beautiful date picker, using a nice combination of colors, effects, and round numbers within blue circles. You’re free to add it to your web projects.

JavaScript Tearable Cloth Simulation

A fantastic and interactive simulation where a cloth can be torn apart with the mouse pointer. Crafted in JavaScript.

CSS Minimal & Clean Bootstrap Date Picker

A significant bootstrap date picker made in pure CSS, HTML and Javascript. The date picker was designed with bootstrap elements and the getDate method. It features a transition animation when selecting the calendar and dates autocompletion.

Gradients: Beautiful Gradient Colors Snippet

A simple and yet creative code snippet created to change gradients with different random colors by pressing the space key on your keyboard. Wrote in pure CSS and JavaScript.

Qlocktwo: Multilanguage Snippet

A very creative CSS, Javascript and HTML 5 snippet that allows showcasing time and seconds with a clock-like animation, it supports multiple languages and it comes in various colors.

Cl.js: Speed-up Console Logging

Cl.js is an useful snippet that helps to speed up console logging in code writing by minimizing the syntax, it simplifies an specific function and aids in saving time.

Draggable CSS and JavaScript Chatbox

A chat box made in CSS and JS that has cool features besides the fact that it is draggable, like the search box, the avatars taking the initials of the username, and some cool hover effects. It was created by Andy Tran and it’s available to be edited and implemented in any website.

Wavescroll: Draggable Backgrounds

Wavescroll is a new concept of screen-size pages presentation which background you can drag or scroll as they get split into strips which smoothly slide outwards.

Credit Card Checkout Form

A cool credit card mockup developed in CSS and jQuery that updates automatically as you fill the checkout payment form.

Phone Styled iFrame

An amazing concept of iFrame that allows you to feature in a live mode your website on a virtual phone from 3 different perspectives: front, leaning, and horizontally tilted.

Online Tickets Design Concept

This is a practical and simple design for online tickets made with CSS and JavaScript, it’s a highly visual interface with the necessary information like number of tickets left, number of people going and range of prices condensed in a drop down menu.

CSS Absolute Centering

A CSS snippet that allows you to center a box in the viewport both horizontally and vertically being completely responsive to any window size.

Interactive SVG Emoji

A CSS & jQuery snippet that animates with some gestures a rounded emoji face created out of SVG embedded in HTML code as you click on the button of the gesture you want.


You may also like...

Read previous post:
Hidden Text
SEO: Everything You Should Know About Hidden Text

Hidden text is one of the oldest tricks in the SEO handbook. If you’re hoping hidden text will somehow boost...