deals

premiumpacks & pure css web elements effects (48 items)

List of effects applied to sites with CSS3 elements.

freebies

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.

This is a design by Codepen user Just another Chris. Its a snippet of an animated, pure CSS nav menu. Upon clicking te menu icon, the front panel i...

This is a design by Codepen user Just another Chris. Its a snippet of an animated, pure CSS nav menu. Upon clicking te menu icon, the front panel is pushed back in a motion similar to closing/opening doors and reveals the menu behind it. Neat hu?

A quick proof of concept for a hover effect utilizing mix-blend mode, and CSS gradients. Created by Codepen user Jon Daiello.

A quick proof of concept for a hover effect utilizing mix-blend mode, and CSS gradients. Created by Codepen user Jon Daiello.

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

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

A stunning 3D Photo Gallery snippet, made in pure CSS by Codepen user Maciej Leszczyński, it consists of a cube with a photo/image assigned to each...

A stunning 3D Photo Gallery snippet, made in pure CSS by Codepen user Maciej Leszczyński, it consists of a cube with a photo/image assigned to each of its faces. Upon selecting an image listed on the right side column, the cube will rotate to display the face where that image has been added. It features smooth CSS animations, and 6 faces for different photos.

A prototype parallax scrolling technique that uses CSS 3D transforms created by Codepen user Keith Clark. No Javascript was used, this great lookin...

A prototype parallax scrolling technique that uses CSS 3D transforms created by Codepen user Keith Clark. No Javascript was used, this great looking Parallax was made purely in CSS.

A neat looking effect created using clip-path. Styling elements based on sibling count. Responsiveness depends on first image size. This great look...

A neat looking effect created using clip-path. Styling elements based on sibling count. Responsiveness depends on first image size. This great looking slider utility was created by Michal Niewitala.

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)

An image gallery with neat expanding panels made in pure CSS by Codepen user Shaw. Image panels expand to full width upon mouse hover, creating a g...

An image gallery with neat expanding panels made in pure CSS by Codepen user Shaw. Image panels expand to full width upon mouse hover, creating a great looking effect. It has keyboard support and CSS Vars to progressively enhance with animation.

Great snippet for an Image Slider made 100% in CSS, it features buttons for next/previous, as well as navigation buttons & neat looking image trans...

Great snippet for an Image Slider made 100% in CSS, it features buttons for next/previous, as well as navigation buttons & neat looking image transition effects. Created by codepen user Avi Kohn.

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.

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

Recreation of a print layout from The Intelligent Lifestyle Magazine book, using pure CSS. Snippet by Codepen user Jules Forrest, it features a pur...

Recreation of a print layout from The Intelligent Lifestyle Magazine book, using pure CSS. Snippet by Codepen user Jules Forrest, it features a pure CSS grid layout with smooth color transition animations on mouse hover.

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

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.

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

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!

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

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

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.

Fun snippet uploaded by Codepen user Giana. Basic animations with box shadows. No extra elements or pseudo-elements required.

Fun snippet uploaded by Codepen user Giana. Basic animations with box shadows. No extra elements or pseudo-elements required.

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

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.

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)

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

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.

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

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.

The base64 encode pattern technique and background clip CSS property is used by Tim Holman in this freebie to create this interesting text effect u...

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.

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)

A snippet featuring a cinematic effect for HTML pages using CSS. It takes advantage of the WebKit extension's entity animation and its properties g...

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.

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

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

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

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 blurred one wherever the box is.

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)

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

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.

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

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.

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

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.

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)

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

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

A set of magical animations for design elements like buttons or static images. This uses CSS only, and the animations include out effects, perspect...

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

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

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.

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

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.

A set of nice filters made in CSS for creating effects like blur, brightness, contrast, grayscale, opacity, saturation. Each effect easily gives yo...

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.

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

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.

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 compelling set of 10 hover effects made in SCSS. The effects represent different aspects of technology and life like travelling, nature, architec...

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.

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

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.

A set of ten hover effects for multiple purposes. The effects included are scanning, piano, burn, movement, comet, bent, bridge, wrecked and beat. ...

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.

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

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.

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

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.

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

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

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!

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

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

An awesome set of ten different transition effects created with CSS3 and activated on hover, perfect for applying them to images and/or icons. Thei...

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.

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

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.

Get a Massive Collection of Fully Editable and Layered Vector T-shirt Designs. Customize completely all the designs to spread your word. Worth of $...

Get a Massive Collection of Fully Editable and Layered Vector T-shirt Designs. Customize completely all the designs to spread your word. Worth of $2000 USD of Graphics, Just for $20 in a unique 99% limited-time discount!

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

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.

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

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.

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

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

Ultimate Tech Training Bundle: Lifetime Subscription for $19! 800+ Courses to learn Programming, Web Development, Software Testing, Mobile Apps, Ne...

Ultimate Tech Training Bundle: Lifetime Subscription for $19! 800+ Courses to learn Programming, Web Development, Software Testing, Mobile Apps, Networking, e-Commerce, Design, Data, IT Certifications, and much more! (98% Off)

A CSS image gallery with some 3D animations and transition effects when we hover over each element. The animation allows to see the thumbnail descr...

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.

CSS3 mirroring effect achieved with the Transform module.

CSS3 mirroring effect achieved with the Transform module.

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

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.

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, ...

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, Icon Fonts, 16:9 Aspect Ratio, Intros, Maps, Infographics, Tables, Calendars, Charts, and Much More! Get it for Only $19 (99% Off)

Navigation with large pressable buttons that animate nicely by David Hellman. The CSS is pretty simple to understand, the background of the menu is...

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.

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.

Using the CSS3 mask-image property to create a striped text-shadow (Webki...

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

720+ Lightroom Presets + 690+ Photoshop Actions from 17 Collections, Compatible with Adobe CS4, CS5, CS6, and CC, Fully Adjustable Settings, Includ...

720+ Lightroom Presets + 690+ Photoshop Actions from 17 Collections, Compatible with Adobe CS4, CS5, CS6, and CC, Fully Adjustable Settings, Includes Extended License and Complete Documentation. Only $19 (95% Off)