FX Library: 120 modern CSS effects for web design & WordPress

Web design, CMS & development

by Stefan Petri

Do you need a button that truly glows, a card that tilts toward the mouse pointer, or a loader that doesn't look like it's from 2012? The FX Library gives you 120 ready-made UI and animation effects in pure HTML and CSS, with no framework, no JavaScript in the components, and no external files. You open the showcase file in your browser, pick an effect, and copy the HTML and CSS with one click each. The .fx- prefix and dedicated resets in every component make the effects ready for WordPress, Elementor, and the like.

120 effects in six sets of 20 each: Buttons, Cards & Container, Hover Effects, Loader & Spinner, Glassmorphism Surfaces, and Scroll & Entry Animations.
Copy instead of rebuilding: every effect has a live preview and a button each for HTML and CSS, and the copied CSS comes with the required variables included.
Conflict-free in WordPress and page builders: All classes begin with .fx-, and every effect has additionally been tested in a test theme with aggressive default styles.
One color scheme for everything: colors, fonts, spacing, and border radii are defined as CSS variables in :root. You change one line, and all the effects follow along.
Fast and considerate: animation is done almost exclusively with transform and opacity, without web fonts, and anyone who has set "reduce motion" will see subtle effects.

Pick an effect, copy it, done. Your next website will look like you spent days fine-tuning the details.

content

6 items

The 6 effect sets

FX Library Buttons: 20 animated CSS buttons to copy

20 animated buttons in pure HTML and CSS: from Shimmer Slide and Neon Glow to 3D Push, Liquid Fill and Cyberpunk Glitch, plus Glass Reflection and Soft Neomorph. Every button responds to hover, keyboard focus and click, and the Magnet button even follows the mouse, with no JavaScript at all. The package includes a showcase file with live preview, search and copy buttons, a CSS file with all 20 effects, and a guide for WordPress and page builders. As of September 2026.

FX Library Cards & Container: 20 CSS cards with hover effects

20 cards and containers for pricing tables, profiles, products, metrics, and more: spotlight glow and 3D tilt that follow the mouse pointer, a rotating gradient border, holographic foil like on a trading card, flip card, stacked cards, and an accordion based on

. All cards are filled with realistic sample content and are also accessible via keyboard. Includes showcase file, CSS file, and guide. As of September 2026.

FX Library Hover Effects: 20 CSS Interactions for Images, Text & UI

20 hover and interaction effects for images, text, and UI elements: zoom with blooming colors, a direction-aware overlay, text scramble, lens flare and crosshair that follow the cursor, a ripple trail, SVG stroke drawing, film grain, duotone, and a growing clip-path circle. All images are drawn as inline SVG and can be replaced with your own photos. Includes a showcase file, a CSS file, and instructions. As of September 2026.

FX Library Loader & Spinner: 20 animated CSS loading animations

20 loaders and spinners, ranging from the minimal pulse ring through the infinity loop, morphing blob, and neon radar to the hourglass, Newton's cradle, and digital countdown. Each loader scales via a single variable, announces itself to screen readers as a loading state, and runs in a seamless loop. Includes a showcase file, CSS file, and instructions. As of September 2026.

FX Library Glassmorphism: 20 Glass Surfaces & UI Widgets in CSS

20 glassmorphism surfaces and ready-made glass widgets: light and dark acrylic, holographic and etched glass, glass navigation, dialog windows, search bar, metrics widget, audio player and badges, plus atmospheric surfaces such as aurora, smoked glass and deep sea with their own backdrop. All surfaces use backdrop-filter and follow the color scheme of the theme variables. Includes a showcase file, a CSS file and a guide. As of September 2026.

FX Library Scroll & Entry: 20 CSS fade-in and scroll animations

20 entry and scroll animations for headings, cards, images, and lists: staggered fade-in, blur to sharp, 3D unfold, curtains, spiral flight, card shuffle, parallax, and a shrinking sticky header. The animations start on load; with an additional class, they run without JavaScript as you scroll into view (Chrome, Edge, and Safari from version 26). Includes a showcase file, a CSS file, and a guide. As of September 2026.

Details of the content

The FX Library is a collection of 120 UI and animation effects for modern websites, divided into six sets of 20 effects each. Each component consists of an HTML snippet and a CSS snippet and runs without a framework, without JavaScript, and without external files; images in the examples are drawn as inline SVG. In the showcase file you can see all effects as a live preview, filter by category or search by name, and copy the code with a single click. With four color themes, you can try out directly how the effects adapt to your branding.

In WordPress, you place the HTML in a "Custom HTML" block or in the HTML element of your page builder, and the CSS under "Additional CSS". Because all classes begin with .fx- and each component defines its own font, spacing, and states, effects and theme do not get in each other's way. You control colors, font, spacing, and corner rounding centrally via CSS variables. Each set also contains a CSS file with all 20 effects and a guide.

All 120 effects at a glance

Buttons

#001 Shimmer Slide
#002 Neon Glow
#003 3D Push
#004 Border Trace
#005 Ripple Wave
#006 Magnetic Hover Feel
#007 Gradient Sweep
#008 Liquid Fill
#009 Cyberpunk Glitch
#010 Minimal Underline Draw
#011 Pill Pulse
#012 Glass Reflection
#013 Dot Grid Pop
#014 Retro Inset
#015 Dual-Layer Shift
#016 Skew Slicer
#017 Strobe Border
#018 Floating Float
#019 Magnetic Border Beam
#020 Soft Neomorph

Cards & Containers

#021 Spotlight Cursor Glow
#022 3D Tilt Hover
#023 Gradient Border Rotate
#024 Depth Layer Lift
#025 Frosted Card
#026 Inner Shadow Recess
#027 Expand on Focus
#028 Glass Reflection Sweep
#029 Holographic Foil
#030 Minimal Ghost Border
#031 Neon Corner Accents
#032 Skew Perspective
#033 Stacked Cards Peek
#034 Reveal Footer Card
#035 Radial Gradient Burst
#036 Floating Badge Card
#037 Prism Edge
#038 Split Contrast Card
#039 Interactive Flip Card
#040 Smooth Accordion Container

Hover & Interaction Effects

#041 Image Zoom & Saturation
#042 Directional Slide Overlay
#043 Text Scramble Simulator
#044 Underline Morph
#045 Icon Orbit Reveal
#046 Background Mesh Shift
#047 Grayscale to Vibrant
#048 Border Bracket Expand
#049 Lens Flare Move
#050 Masked Text Reveal
#051 Ripple Cursor Trail
#052 Kinetic Typo Shake
#053 SVG Stroke Draw
#054 Noise Texture Grain
#055 Dual Tone Shift
#056 Circle Clip-Path Expand
#057 Skewed Banner Reveal
#058 Floating Tooltip Morph
#059 Drop-Shadow Bloom
#060 Crosshair Target Snap

Loaders & Spinners

#061 Minimal Pulse Ring
#062 Tri-Dot Stagger Wave
#063 Infinity Loop
#064 Gradient Conic Spinner
#065 Morphing Blob
#066 Dual-Orbit Planets
#067 Barcode Scanner Line
#068 Liquid Fill Flask
#069 Hourglass Flip
#070 Bouncing Cubes
#071 Soundwave Equalizer
#072 Neon Radar Sweep
#073 Segmented Ring Progress
#074 Glowing Particle Spiral
#075 Step Dots Progress
#076 Cyber Hexagon Pulse
#077 Shifting Square Lattice
#078 Pendulum Swing
#079 Elastic Stretch Bar
#080 Digital Countdown Spinner

Glassmorphism & Modern Surfaces

#081 Frosted Acrylic Dark
#082 Frosted Acrylic Light
#083 Holographic Prism Glass
#084 Noise-Etched Glass
#085 Multi-Layer Depth Glass
#086 Colored Glass Gradient
#087 Mirror Edge Reflection
#088 Cyber Neon Backdrop
#089 Frosted Pill Navigation
#090 Glass Modal Window
#091 Translucent Search Bar
#092 Blurred Metric Widget
#093 Aurora Borealis Surface
#094 Glass Badge Pill
#095 Frosted Audio Player Widget
#096 Prismatic Edge Border
#097 Smoke Glass Overlay
#098 Ultra-Thin Line Glass
#099 Deep Sea Glass
#100 Satin Matte Glass

Scroll & Entry Animations

#101 Staggered Fade-Up
#102 Blur to Sharp In
#103 Scale Elastic In
#104 Flip-X Perspective
#105 Split Column Slide
#106 Clip-Path Diagonal Reveal
#107 Parallax Depth Simulation
#108 Letter-by-Letter Drift
#109 Zoom-Out Settle
#110 Floating Ambient Sway
#111 Pop & Settle Spring
#112 Horizontal Ribbon Slide
#113 3D Fold Open
#114 Wipe Down Curtains
#115 Skew & Straighten
#116 Soft Glow Fade-In
#117 Spiral Zoom Entry
#118 Card Shuffle Settle
#119 Sticky Element Shrink
#120 Curtain Reveal Split

Note

Usable with: HTML & CSS, WordPress
Licence: private and commercial Rights of use

Created with love by

Stefan Petri

Together with his brother Matthias, Stefan Petri runs the popular specialist forum PSD-Tutorials.de and the e-learning platform TutKit.com, which focuses on the training and further education of digital professional skills.

Products