deals

premiumpacks & css effects (38 items)

Curated collection with useful scripts and pens covering CSS effects.

freebies

A set of cool text effects made with CSS. The effects show different uses for text overlays like as offset text-shadow and the use of halftone patt...

A set of cool text effects made with CSS. The effects show different uses for text overlays like as offset text-shadow and the use of halftone patterns as underlay shadow. Created by CodePen user Flowuhh.

A control section for CSS filter effects that allows you to easily manipulate images dynamically. The bottom slider bars controls the degree of bri...

A control section for CSS filter effects that allows you to easily manipulate images dynamically. The bottom slider bars controls the degree of brightness, contrast, blur, saturation, and color while the image on top showcases the changes in real time. Created by CodePen user Andreas Wik.

A long list of pure CSS effects that can be used on buttons, text or any hoverable element. The CSS effects are pre-compiled through Sass, showcase...

A long list of pure CSS effects that can be used on buttons, text or any hoverable element. The CSS effects are pre-compiled through Sass, showcased with buttons structured in HTML via PUG. Created by CodePen user strafeOK

180+ Bootstrap v4 Website Themes & HTML Components, only $14:

180+ Bootstrap v4 Website Themes & HTML Components, only $14:

An on-hover effect showcased over a set of buttons on a column arrangement. The effect is revealed with a circular shape that expands itself in a l...

An on-hover effect showcased over a set of buttons on a column arrangement. The effect is revealed with a circular shape that expands itself in a linear motion, taking over the whole button background while on-hover. Created by CodePen user Sammy Helali.

A set of underline CSS text effects that on hover animates and exposes different highlight styles for text sections in a smooth linear motion. The ...

A set of underline CSS text effects that on hover animates and exposes different highlight styles for text sections in a smooth linear motion. The effects are coded in SCSS and structured in a simple HTML layout. Created by CodePen user @cecilehabran.

A dynamic background gradient that changes its colors on scroll action, adapted from a scroll indicator. The effect works by overlaying two gradien...

A dynamic background gradient that changes its colors on scroll action, adapted from a scroll indicator. The effect works by overlaying two gradients, one dynamic and the other fixed, both locked to the viewport dimensions and pulled behind the text, similar to the scroll indicator. Created by CodePen user Mike Riethmuller.

Smashing Magazine's Complete Library, Only $29! Get Unlimited Access 60 eBooks About Web Design & Development With The Savvy & Expertise of Best Se...

Smashing Magazine's Complete Library, Only $29! Get Unlimited Access 60 eBooks About Web Design & Development With The Savvy & Expertise of Best Selling Authors On UX Design, Content Strategy, Best Design Practices, Freelancing, WordPress, and Much More! (93% Off)

Beautiful northern aurora lights animation for footer sections built in pure CSS. In a nutshell, CSS animates and modify size and colors of the ele...

Beautiful northern aurora lights animation for footer sections built in pure CSS. In a nutshell, CSS animates and modify size and colors of the element's bottom section; to make the desired impact, neon colors are used over a black background. Element created by CodePen user Amit Ashok Kamble.

A CSS3 animation library with animations that are more vibrant than most simple animations. Additionally, the library includes some wicked animatio...

A CSS3 animation library with animations that are more vibrant than most simple animations. Additionally, the library includes some wicked animations that can be fun to play with. You can find all you need in one CSS file; then you'll be ready to start adding animation to your content with simple classes. Developed by Kristoffer Andreasen.

A Card UI design made completely in CSS. It has a flat color style with shapes and buttons that go over the card borders. When toggling between opt...

A Card UI design made completely in CSS. It has a flat color style with shapes and buttons that go over the card borders. When toggling between options it showcases a transition with an awesome "blob" feeling. Created by Codepen User Adam Kuhn.

340+ Transparent Smoke Shapes, Brushes, Patterns, Fonts & Backgrounds, Only $19: High-Resolution Assets, Realistic Smoke Effects, Commercial License

340+ Transparent Smoke Shapes, Brushes, Patterns, Fonts & Backgrounds, Only $19: High-Resolution Assets, Realistic Smoke Effects, Commercial License

This CSS effect emulates in your display the shape and movement of a lifted paper that it's pushed when on hover. Created by Codepen user Bastian A...

This CSS effect emulates in your display the shape and movement of a lifted paper that it's pushed when on hover. Created by Codepen user Bastian Andre making use of Sass.

A CSS Carousel font showcase displaying each character of the alphabet as its own slide, and mapping the keyboard letter keys to their correspondin...

A CSS Carousel font showcase displaying each character of the alphabet as its own slide, and mapping the keyboard letter keys to their corresponding indexes in the carousel. It's fully responsive, features smooth transition animations and supports touchscreen 

A small collection created in CSS by Codepen user John Heiner, it features 8 animated button styles with stunningly beautiful animations like Lift ...

A small collection created in CSS by Codepen user John Heiner, it features 8 animated button styles with stunningly beautiful animations like Lift Off, Hologram, Diagonal Swipe, and more!

100+ Unique Animal T-Shirt Designs & Illustrations, Only $14: Ai & EPS Vectors, Editable Texts, 100% Customizable & Resizable Designs For Commercia...

100+ Unique Animal T-Shirt Designs & Illustrations, Only $14: Ai & EPS Vectors, Editable Texts, 100% Customizable & Resizable Designs For Commercial Use

 Awesome image transition effect triggered when hovering over the photo, created in pure CSS by Codepen user Callum Macrae.

 Awesome image transition effect triggered when hovering over the photo, created in pure CSS by Codepen user Callum Macrae.

Neat CSS tasklist by Codepen user Shaw adapted from original JS code by dribbble user Gal Shir. It features neat animations for three checkboxes in...

Neat CSS tasklist by Codepen user Shaw adapted from original JS code by dribbble user Gal Shir. It features neat animations for three checkboxes included in the snippet.

Rhyne Vlaservich delivers a stunning, less formal looking CSS framework to create neat looking websites with a paper-written effect. PaperCSS featu...

Rhyne Vlaservich delivers a stunning, less formal looking CSS framework to create neat looking websites with a paper-written effect. PaperCSS features a Flexgrid system that supports 12 columns per row, great looking typography that actually looks handwritten, and neat tables, lists, forms, etc. Definitely worth taking a look at more of the features of this great piece of work! 

31 Packs in 1 Huge Bundle: 200+ Low Poly 3D People Models, 3DS, OBJ, FBX, STL File Formats for VR, AR, Architectural Visualization, and Scale Graph...

31 Packs in 1 Huge Bundle: 200+ Low Poly 3D People Models, 3DS, OBJ, FBX, STL File Formats for VR, AR, Architectural Visualization, and Scale Graphics Projects! Only 29$ (82% Off)

Neat looking loading animation made purely in CSS by Codepen user Onno, this loader features a smooth, clean animation of droplets falling off the ...

Neat looking loading animation made purely in CSS by Codepen user Onno, this loader features a smooth, clean animation of droplets falling off the rectangle that goes along the text to signify loading is in progress.

Another amazing pen by Codepen user Jamie Coulter, this is a UI component made in CSS for a pop out effect to display statistics or other relevant ...

Another amazing pen by Codepen user Jamie Coulter, this is a UI component made in CSS for a pop out effect to display statistics or other relevant information.

Breadcrumbs a neat navigation solution by dribbble user John Wilson, created as a custom navigation solution for Envy's Ivy app. As the user approa...

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.

Massive 23,000+ PowerPoint Presentation Slides Bundle, 2000+ Vector Icons, 3 Aspect Ratio Formats, Animated Transitions, Drag & Drop Image Placehol...

Massive 23,000+ PowerPoint Presentation Slides Bundle, 2000+ Vector Icons, 3 Aspect Ratio Formats, Animated Transitions, Drag & Drop Image Placeholders, Vector Shape Elements, Scalable World & USA State Maps, Infographics, Tons of Content More! Only 19$ (92% Off)

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

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.

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

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.

A useful snippet, this is a lightweight bit of code that allows for the creation of simple CSS table tabs and provides functionality and navigation...

A useful snippet, this is a lightweight bit of code that allows for the creation of simple CSS table tabs and provides functionality and navigation options. It's lightweight and doesn't affect loading times. Uploaded by Codepen user Jay Pick

Stock Animation Assets Bundle, Over 250 Pre-Animated & Ready To Use Elements in Full HD. Without Prior Experience, You Can Create Beautiful Video A...

Stock Animation Assets Bundle, Over 250 Pre-Animated & Ready To Use Elements in Full HD. Without Prior Experience, You Can Create Beautiful Video Animations for eCommerce, Education, Business, Tutorials, & Much More, Only $29 (98% Off)

Based on dribbble users' Riccardo Cavallo contact animation, this CSS snippet uploaded to Codepen by user Aaron Taylor is a neat piece that deploys...

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.

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

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

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

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.

1400 Logo Templates, Full Vector Files in Ai, PSD with Smart Objects, PNG, JPG, 8 Design Styles, From Colorful Designs to Black and White Corporate...

1400 Logo Templates, Full Vector Files in Ai, PSD with Smart Objects, PNG, JPG, 8 Design Styles, From Colorful Designs to Black and White Corporate Logos. Regular price 4200$ Get Them All for Just 12$! (100% Off)

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

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

A nice tesselation transition effect created by Chris Johnson, based on Delaunay Triangulation in order to create visually appealing and randomly g...

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.

A really nice CSS snippet to create a 3D login form, a great 3D effect ready to use in your next project.

A really nice CSS snippet to create a 3D login form, a great 3D effect ready to use in your next project.

Supercharge your workflow with hundreds of UI Elements, Responsive Layouts, Web UI Components, & Templates for prototyping apps, websites, and ...

Supercharge your workflow with hundreds of UI Elements, Responsive Layouts, Web UI Components, & Templates for prototyping apps, websites, and web apps from 16 awesome products for Sketch & Photoshop at a crazy 95% off. This bundle includes $667 worth of goodies which for a limited time you can get for just $29

A really nice experiment to simulate a bezier mesh projection with pure code, grid interaction is fastest in Chrome.

A really nice experiment to simulate a bezier mesh projection with pure code, grid interaction is fastest in Chrome.

A nice presentation effect which shows photos as 3D slides, it takes photos randomly from Unsplash, however, you can add the source you want.

A nice presentation effect which shows photos as 3D slides, it takes photos randomly from Unsplash, however, you can add the source you want.

A handful CSS3 library that animate objects with different easing effects (fade, flip, zoom, etc) while you are scrolling down, when you scroll up ...

A handful CSS3 library that animate objects with different easing effects (fade, flip, zoom, etc) while you are scrolling down, when you scroll up they return to its initial position.

7300+ Unique Presentation Slides PowerPoint & Keynote Templates Bundle, Only $12 USD! Drag n' Drop Easy Edition, Vector Elements, Ready to print! (...

7300+ Unique Presentation Slides PowerPoint & Keynote Templates Bundle, Only $12 USD! Drag n' Drop Easy Edition, Vector Elements, Ready to print! (98% OFF)

A sleek effect of flying anti-gravity particles, ideal for headers, presentations, slideshows and related!

A sleek effect of flying anti-gravity particles, ideal for headers, presentations, slideshows and related!

A sleek material design color selector, with nice reactive animations and hover effects.

A sleek material design color selector, with nice reactive animations and hover effects.

A cool particle effect made with pure CSS. This simple snippet can help your website give a little realism to it, without affecting the page load. ...

A cool particle effect made with pure CSS. This simple snippet can help your website give a little realism to it, without affecting the page load. You can alter the direction, size, speed and color of the particles.

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $...

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $19 for a limited-time

A CSS and JavaScript snippet that shows an image transition with exploding particles that looks like a 3D effect. It can be used in a website or a ...

A CSS and JavaScript snippet that shows an image transition with exploding particles that looks like a 3D effect. It can be used in a website or a mobile app, is lightweight and does not affect the page load.

A beautiful plugin made with JavaScript for creating a simple trampoline effect that can be applied to any element, especially great for galleries ...

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.

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

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.

160+ Fonts Professional Sans-Serif Font Family, Only $25! True Italics & Small Caps For Each Weight, OpenType Features Like Small Caps, Stylistic S...

160+ Fonts Professional Sans-Serif Font Family, Only $25! True Italics & Small Caps For Each Weight, OpenType Features Like Small Caps, Stylistic Sets, Contextual Alternates, and Discretionary Ligatures. Commercial License Included!

A set of effects for modals created with CSS. They animate thanks to CSS transforms and animations that are supported by several modern browsers, a...

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.

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

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.