A modern, interactive CSS filter generator built with Next.js. Create stunning CSS filters with drag-and-drop reordering and real-time preview.

This was once CSSFiltergenerator.com but I let the domain name lapse after many years and of course someoene else scooped it up. I decided to bring it back as I noticed the other CSS filter generators still didn't offer filter reordering.

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Generate static export
npm run build && npx next export

• Next.js 14
• TypeScript
• Tailwind CSS
• @dnd-kit
• Static Export

After building, the static files will be in the out/ directory.

This repo includes deploy.sh for SFTP deploys with lftp.

Required .env keys:

SFTP_HOST=...
SFTP_PORT=22
SFTP_USER=...
SFTP_PASS=...
SFTP_REMOTE_DIR=...

Usage:

# Test SFTP connectivity
./deploy.sh test

# Build + upload out/ to SFTP_REMOTE_DIR
./deploy.sh

• Blur
• Brightness
• Contrast
• Grayscale
• Hue-Rotate
• Invert
• Opacity
• Saturate
• Sepia

This is a complete rewrite of the original jQuery-based CSS Filter Generator, now built with modern React/Next.js for better performance, maintainability, and user experience.

• Modern React architecture with TypeScript
• Smooth drag-and-drop with @dnd-kit
• Better mobile responsiveness
• Improved accessibility
• Static export for easy deployment
• Simple deployment script
• New more friendly UI

This project is open source. Feel free to use the generated CSS in your projects without attribution.

Created by Greg Gant | View on GitHub