Topic Archives

CSS Effect Snippets

Browse our collections of creative, CSS effects that are ready to copy and paste into your next web design.

View all CSS content

8 CSS Snippets That Demonstrate the Power of Shadow Effects

8 CSS Snippets That Demonstrate the Power of Shadow Effects

CSS / UI Design

A collection of useful code snippets that demonstrate the usefulness and what you can fully achieve with CSS shadow effects.

10 CSS Snippets for Creating Unique Background Effects

10 CSS Snippets for Creating Unique Background Effects

CSS / UI Design

By combining CSS with a sprinkle of JavaScript, you can create some truly creative background effects, as these code snippets demonstrate.

8 Radiant Glow Effects Made with CSS and JavaScript

8 Radiant Glow Effects Made with CSS and JavaScript

CSS / JavaScript

Glow effects are a design staple, adding style and setting the mood. Here’s a collection of CSS and JavaScript snippets for creating those stunning glow effects.

8 CSS & JavaScript Snippets for Texture & Pattern Effects

8 CSS & JavaScript Snippets for Texture & Pattern Effects

CSS / JavaScript / UI Design

We have a fantastic collection of free-to-use CSS and JavaScript code snippets that you can use to create highly creative patterns & textures.

10 CSS & JavaScript Snippets for Page Transition Effects

10 CSS & JavaScript Snippets for Page Transition Effects

CSS / UI Design

A collection of CSS and JavaScript snippets for creating page transitions that you can use to add something exciting to your next project.

8 CSS & JavaScript Snippets for Creating 3D Text Effects

8 CSS & JavaScript Snippets for Creating 3D Text Effects

CSS / JavaScript / UI Design

A collection of CSS and JS snippets for creating beautiful 3D text effects. They run the gamut from calm and classy to outrageously animated.

8 CSS & JavaScript Snippets for Reflection & Refraction Effects

8 CSS & JavaScript Snippets for Reflection & Refraction Effects

CSS / JavaScript / UI Design

The simple act of light reflecting off of or refracting through a surface can produce stunning visuals. We see it every day in the physical world. It might be the…

8 CSS & JavaScript Snippets for Creating Realistic Liquid Effects

8 CSS & JavaScript Snippets for Creating Realistic Liquid Effects

CSS / JavaScript / UI Design

A collection of liquid effects CSS & JavaScript snippets that are incredibly realistic, while others are reminiscent of a sci-fi fantasy.

8 CSS & JavaScript Snippets for Bokeh Effects

8 CSS & JavaScript Snippets for Bokeh Effects

CSS / JavaScript / UI Design

Enhance your website’s look with these CSS and JavaScript snippets for creating eye-catching bokeh effects. Perfect for adding visual flair.

8 CSS & JavaScript Snippets for Creating Blur Effects

8 CSS & JavaScript Snippets for Creating Blur Effects

CSS / JavaScript / UI Design

We share some excellent examples of CSS & JavaScript blur effects. They are a surefire way of making a design element stand out.

8 CSS & JavaScript Snippets for Card UI Hover Effects

8 CSS & JavaScript Snippets for Card UI Hover Effects

CSS / JavaScript / UI Design

From bold transformations to simple highlights, we share some fantastic CSS & JavaScript card UI hover effect snippets.

8 CSS & JavaScript Snippets for Creating Halftone Effects

8 CSS & JavaScript Snippets for Creating Halftone Effects

CSS / JavaScript / UI Design

Discover various CSS and JavaScript snippets for adding halftone patterns to your web designs and making them interactive.

CSS Filter Toolbox – Libraries, Web-Based Apps & Tutorials

CSS Filter Toolbox – Libraries, Web-Based Apps & Tutorials

CSS

CSS Image Filters are a simple method for adding unique styles to images. We’ve collected the best free resources to help get you started.

8 CSS & JavaScript Snippets for Adding Scroll Effects to Your Website

8 CSS & JavaScript Snippets for Adding Scroll Effects to Your Website

CSS / JavaScript / UI Design

A fantastic collection of CSS and JavaScript scrolling effect code snippets that will wow your visitors and steer clear of being obtrusive.

8 CSS & JavaScript Snippets for Lighting & Shading Effects

8 CSS & JavaScript Snippets for Lighting & Shading Effects

CSS / JavaScript / UI Design

A collection of lighting and shading effect CSS & JavaScript snippets for recreating the incredible effects we see in modern video games.

10 CSS & JavaScript Snippets for Text Distortion Effects

10 CSS & JavaScript Snippets for Text Distortion Effects

CSS / UI Design

We have a collection of CSS & JavaScript text distortion effect snippets that you can freely use to create stunning headlines and taglines.

8 CSS Code Snippets for Creating Stunning Border Effects

8 CSS Code Snippets for Creating Stunning Border Effects

CSS / UI Design

We share a collection of pure CSS border effects that prove that web designers should no longer have to settle for a basic design.

8 CSS & JavaScript Snippets for Background Noise Effects

8 CSS & JavaScript Snippets for Background Noise Effects

CSS / JavaScript / UI Design
12