deals

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

500 Unique Vector Mandala Designs, Only $14: Ai & EPS File Formats, Great For Print Designs. Commercial Use License

500 Unique Vector Mandala Designs, Only $14: Ai & EPS File Formats, Great For Print Designs. Commercial Use License

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.

2500+ Graphic Design Elements, Logos, & Illustrations Bundle, Ai, PSD & EPS Vectors, Commercial Use

2500+ Graphic Design Elements, Logos, & Illustrations Bundle, Ai, PSD & EPS Vectors, Commercial Use

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.

6000+ Flat Icons Pack, Only $24: Vector Ai, SVG & EPS, 38 Content Categories

6000+ Flat Icons Pack, Only $24: Vector Ai, SVG & EPS, 38 Content Categories

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!

Visual Drag & Drop Bootstrap Website Generator, Only $19! Lifetime Updates, Unlimited Commercial Use License.

Visual Drag & Drop Bootstrap Website Generator, Only $19! Lifetime Updates, Unlimited Commercial Use License.

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.

Ugly Sweater Christmas Pack: Knitted Ornaments and Patterns, Sweater Templates, Plus a Photoshop Action to Transform Fonts, Images, Photos, and Mor...

Ugly Sweater Christmas Pack: Knitted Ornaments and Patterns, Sweater Templates, Plus a Photoshop Action to Transform Fonts, Images, Photos, and More, Into Knitting Patterns! Only 9$ (70% 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.

68 Fonts Bundle, 9+ Design Styles, Several Weights with Variations and Swashes, Extended License, only 7$! (98% Off)

68 Fonts Bundle, 9+ Design Styles, Several Weights with Variations and Swashes, Extended License, only 7$! (98% 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.

450 Halloween Design Assets, Vector Character & Scene Generator. 4 Design Styles. Over 60% Discount! Get This Spooky Promo Now For Only 9$!

450 Halloween Design Assets, Vector Character & Scene Generator. 4 Design Styles. Over 60% Discount! Get This Spooky Promo Now For Only 9$!

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.

Cartoon Avatars Creator Pack With Over 1800 Vector Elements To Compose Unique Looking Characters With Their Own Facial Expressions, Outfits, Hairst...

Cartoon Avatars Creator Pack With Over 1800 Vector Elements To Compose Unique Looking Characters With Their Own Facial Expressions, Outfits, Hairstyles, And Much More! Endless Combinations, Only $19! (34% 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.

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects fo...

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects for Illustrator & Photoshop, As Well As Paper Textures & Mockups Included, Get This Bundle For Just $14! (95% Off)

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.

330+ Unique Printing Templates Bundle, Includes 200+ Multi Purpose Flyer Templates, Corporate Identity Kit, Business Cards, Magazine Templates, Let...

330+ Unique Printing Templates Bundle, Includes 200+ Multi Purpose Flyer Templates, Corporate Identity Kit, Business Cards, Magazine Templates, Letterheards, Brochures, CV/Resume Templates, INDD, PSD, Ai, EPS File Formats. Get this Bundle Now For Just $29!

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.

Lifetime Access to Timelinr: High-Level Roadmaps, Timelines, & Kanban Boards, Take Your Planning & Task Coordination To The Next Level With This Aw...

Lifetime Access to Timelinr: High-Level Roadmaps, Timelines, & Kanban Boards, Take Your Planning & Task Coordination To The Next Level With This Awesome App For Just $37/Single User & $49/For 2 Users! (97% Off)

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.

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)

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.

220+ Professional Seamless Vector Patterns, Including AI, SVG & PDF Vector Files, High-Resolution PNGs, Only $9 USD! (70%OFF)

220+ Professional Seamless Vector Patterns, Including AI, SVG & PDF Vector Files, High-Resolution PNGs, Only $9 USD! (70%OFF)

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.

600+ Isolated Objects, PSD Files with Smart Objects, Transparent Backgrounds & Shadows, Organized Layer Structure + Scene Creator, Only 10$! (91% Off)

600+ Isolated Objects, PSD Files with Smart Objects, Transparent Backgrounds & Shadows, Organized Layer Structure + Scene Creator, Only 10$! (91% 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.

1050+ Isolated Food Items + Premade Scenes Bundle Only $15! (95 % Discount) Usually valued $306 USD

1050+ Isolated Food Items + Premade Scenes Bundle Only $15! (95 % Discount) Usually valued $306 USD

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

Lifetime Social Media Marketing Tool One Payment Only (No monthly fees) Manage Facebook, Instagram, Twitter & Linkedin Accounts, Just $29!

Lifetime Social Media Marketing Tool One Payment Only (No monthly fees) Manage Facebook, Instagram, Twitter & Linkedin Accounts, Just $29!