Free Open Source FX CSS Effects v2.0.0

A lightweight, pure CSS effects library with over 100 professional effects for backgrounds, images, text, buttons, scroll reveals, and more. Add the optional JavaScript for scroll-triggered animations. No dependencies. Just CSS — plus JS when you want control over execution.

Pure CSS Effects. Optional JavaScript Scroll Triggers.

FX CSS gives you 106 professional effects — all pure CSS, zero JavaScript required. Effects execute immediately on page load. But if you want them to animate when they scroll into view, add the optional JavaScript. Two files. Two modes. Your choice.

Full Version vs Mini Version

FX CSS comes in two versions: The Full version (33.8 kB) includes all 106 professional effects — text animations, cards, cursors, masonry. The Mini version (13.7 kB) includes 80+ essential entrance animations and utilities — perfect for most projects.

This website uses the Mini version — lightweight and fast.

Installation — CSS Only

Important: If you're fetching the files from a remote location, include integrity and crossorigin="anonymous" to ensure security and prevent tampering.

FX CSS — FULL Version

<link rel="stylesheet" href="https://opensource.josebamirena.com/fx/2.0.0/dist/css/fx.min.css" 
  integrity="sha384-Q3ByUIqgFgXgnViWSbdp6weaqAy/LrIazeqfIVzMIM/Sy5/+R+0+GisSDOlyX1Kf" 
  crossorigin="anonymous">

FX CSS — MINI Version

<link rel="stylesheet" href="https://opensource.josebamirena.com/fx/2.0.0/dist/css/fx-mini.min.css" 
  integrity="sha384-eEV0R7HqaIJEgXJHMtQe35S+S0fm9P7RJw1VRsEaQHV00EmsvTunwOt4crNwndoV" 
  crossorigin="anonymous">

Quick Example — CSS Only

<div class="flex-bg fx-parallax">
  <h1 class="fx-text-glitch fx-text-neon" data-text="TITLE">TITLE</h1>
  <div class="fx-text-cascade">
    <span style="--char-index:1">cascade</span>
    <span style="--char-index:2">effect</span>
    <span style="--char-index:3">text</span>
  </div>
  <button class="btn fx-btn-slide fx-btn-ripple">FX button</button>
  <img src="image.jpg" class="fx-image-zoom fx-gray" alt="description">
</div>

Why Add the JavaScript?

FX CSS works perfectly without JavaScript — effects run immediately on page load. Adding the optional JavaScript enables two additional features:

Scroll-triggered reveals — Use data-reveal on any element to animate it when it enters the viewport. Options: fade, left, right, up, down, zoom.
Repeatable animations — Add data-repeat to make the animation trigger every time the element scrolls into view, not just once.
Scroll-triggered effects — Add the .anime class to any element with an fx-* effect and the effect will activate each time the element enters the viewport.
Custom timing — Control animation delay and duration per element with data-delay="200" and data-duration="1200".

Optional JavaScript — Anime on Viewport

<script src="https://opensource.josebamirena.com/fx/2.0.0/dist/js/fx.min.js" 
  integrity="sha384-O9RJI9uiKsj15CdflxRQOB1VfRR3tsSInjCo4BSvYTp/IYSMcK50e1bPcDZsPkUJ" 
  crossorigin="anonymous"></script>
<script>
  fx.init();
</script>

Scroll Reveal Example — Simple

<div data-reveal="up">
  This element fades in up when you scroll to it
</div>

Scroll Reveal Example — With Repeat & Delay

<div data-reveal="zoom" data-repeat data-delay="200" data-duration="1200">
  This element zooms in every time you scroll to it
  (200ms delay, 1.2s duration)
</div>

Scroll Reveal Options

Attribute Value	Effect
`data-reveal="fade"`	Simple fade in
`data-reveal="left"`	Slide in from left
`data-reveal="right"`	Slide in from right
`data-reveal="up"`	Slide up from bottom
`data-reveal="down"`	Slide down from top
`data-reveal="zoom"`	Zoom in from 0.8 scale

CSS FX Categories

Image Effects4
.fx-gray.fx-polaroid.fx-image-zoom.fx-image-reveal

Text & Typography Effects23
.fx-underline.fx-typewriter.fx-text-perspective.fx-text-holo.fx-text-neon.fx-text-outline.fx-text-blur-reveal.fx-text-cascade.fx-text-wave.fx-text-cube.fx-text-pinwheel.fx-text-wipe.fx-text-curtain.fx-text-cinema-zoom.fx-text-matrix.fx-text-mask.fx-text-reveal-mask.fx-text-shadow-dance.fx-text-multi-shadow.fx-text-distort.fx-text-glitch

Background Effects5
.flex-bg.fx-bg-fade.fx-parallax.fx-multi-overlay.fx-noise-bg

Slide & Movement Effects16
.fx-scale.fx-rotate.fx-bounce.fx-heartbeat.fx-hoverbeat.fx-slide-in.fx-text-slide-left.fx-text-slide-right.fx-text-slide-up.fx-text-slide-down.fx-text-slide-bounce.fx-text-flip-horizontal.fx-text-flip-vertical.fx-text-spiral.fx-text-scatter.fx-text-particle-spin

Button & Interactive Effects8
.fx-btn-slide.fx-btn-ripple.fx-scale.fx-rotate.fx-bounce.fx-depth.fx-shine.fx-multi-shadow

Scroll & Reveal Effects5
[data-reveal].fx-scroll-progress[data-fx-blur][data-fx-scroll-reveal][data-fx-cascade-reveal]

Cursor Effects3
.fx-custom-cursor.fx-cursor-dot.fx-cursor-outline

Border & Divider Effects3
.fx-typewriter-border.fx-divider-icon.fx-gradient-border

Card & Container Effects4
.fx-neu-card.fx-glass.fx-multi-shadow.fx-depth

Grid & Layout Effects2
.fx-masonry-grid.fx-masonry-item

Theme Effects3
.fx-theme-transition.fx-light-only.fx-dark-only

Utility Classes

⏱Delay Utilities
.fx-delay-100 to .fx-delay-1000 (0.1s–1s)

Iteration Utilities
.fx-infinite.fx-once.fx-twice.fx-thrice

↔Direction Utilities
.fx-alternate.fx-reverse.fx-alternate-reverse

Fill Mode Utilities
.fx-forwards.fx-backwards.fx-both

Duration Utilities
.fx-duration-fast (0.3s), .fx-duration-normal (0.6s), .fx-duration-slow (1s), .fx-duration-very-slow (2s)

Timing Function Utilities
.fx-ease.fx-ease-in.fx-ease-out.fx-ease-in-out.fx-linear.fx-bounce.fx-elastic

Download FX CSS Effects v2.0.0 Files

Important: Please do not fetch files directly from this website. Remote fetching is blocked for security and performance reasons.

Follow the instructions and use my opensource CDN.

fx.min.css— Full CSS version (106 effects)
33.8 kB. CHECKSUM: 56e394947d7931b899f6d744c1bd5dbf
fx.css— Source CSS Full, unminified (106 effects)
49.4 kB. CHECKSUM: d3c9f0e54a00ee6a4d9f40ce20602199
fx-mini.min.css— Mini CSS version (80+ effects)
13.7 kB. CHECKSUM: 1fec8a0c6890a9de29e9df4574ece89d
fx-mini.css— Source CSS Mini, unminified (80+ effects)
20.2 kB. CHECKSUM: 399bd562795fca974ae902a9fea04c33
fx.min.js— Optional JavaScript code
5.4 kB. CHECKSUM: 179b7e6615d1490bfd98a2a8861dc7d0
fx.js— Optional source JavaScript code, unminified
10.1 kB. CHECKSUM: 1579bb59a604b1aea2a336fd2155c950
fx-2.0.0.zip— Complete package with CSS, JS, docs & examples
33.0 kB. CHECKSUM: 9605e73525463872b40543688fc5cb48
README— MD format documentation
LICENSE— MIT license

All Freebies are open source under the MIT License. Free for personal and commercial use. A link back is appreciated but never required.

I don't ask for emails. I don't ask for signups. Click, copy, use. That's it. I built these for myself and I'm sharing them because sharing is how we all grow.

Personal use. Commercial use. Modify it. Sell it. Whatever works for you. All I ask? If you find it useful, a link back to this site is appreciated. But it's not required. Ever.

Take it. Modify it. Break it. Fix it. Use it in your projects. Share it with your friends. I built this to be useful, not to be protected. Just don't sell it as your own—that's not cool.