CSS only library to apply color filters.

Related tags

Learning resource css ui css3 css-framework filters
Overview

filters.css

CSS only library to apply color filters.

See the full documentation

Preview

Features

  • Only CSS. No JavaScript!
  • ~1KB minified and gzipped!
  • Supports all modern browsers
  • Built with SCSS.
  • Hover support.

Installation

via npm

npm install filters.css

via cdn

<link href="https://unpkg.com/filters.css" rel="stylesheet">

download

<link href="dist/filters.min.css" rel="stylesheet">

Usage

filters.css can be used with any css framework.

example

<img src="..." class="blur-3" />

Filter Classes

class format example hover
blur-{0-10} .blur-3 .hover-blur-3
grayscale-{0-10} .grayscale-3 .hover-grayscale-3
brightness-{0-10} .brightness-3 .hover-brightness-3
contrast-{0-10} .contrast-3 .hover-contrast-3
invert-{0-10} .invert-3 .hover-invert-3
saturate-{0-10} .saturate-3 .hover-saturate-3
sepia-{0-10} .sepia-3 .hover-sepia-3
backdrop-blur-{0-10} .backdrop-blur-3 .hover-backdrop-blur-3
opacity-{0-10} .opacity-3 .hover-opacity-3

License

MIT

You might also like...

Zenload - "Load couple loaders and apply transform one-by-one

Zenload Load couple loaders and apply transforms one-by-one. Install npm i zenload -g How to use? With env vairable ZENLOAD: NODE_OPTIONS='"--loader

Jan 25, 2022

Sorting visualizer to introduce students to different sorting algorithms, how they work, and how to apply them

sorting-visualizer Sorting visualizer to introduce students to different sorting algorithms, how they work, and how to apply them Iteration 1 Demo: ht

Nov 14, 2022

Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Paranoia 💊 Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden dat

Dec 29, 2022

Apply IPO From Multiple Meroshare Accounts at Once.

Apply IPO From Multiple Meroshare Accounts at Once.

⚙️ HamroShare : Batch IPO Applier HamroShare is a minimal web-application that lets you apply for IPOs from multiple meroshare accounts at once. Note:

Nov 15, 2022

Apply version control to databases from within a Node.js application.

Node Flyway Apply version control to databases from within a Node.js application. Uses Flyway for database version control, schema evolution and migra

Sep 6, 2022

🌈 GitHub following, followers, only-following, only-follower tracker 🌈

🌈 GitHub following, followers, only-following, only-follower tracker 🌈

github-following-tracker GitHub following, followers, only-following, only-follower tracker 👀 Just enter your GitHub name and track your followings!

Jun 15, 2022

📷 Detects your face and adds filters from your webcam. You can capture and download images.

📷 Detects your face and adds filters from your webcam. You can capture and download images.

Snapchat Filters on WebCam 📷 Detects your face and adds filters from your webcam. You can capture and download images. 👉 Visit site 📌 Screenshots ?

Apr 27, 2022

LinkOff - Cleans the LinkedIn feed based on keywords and filters

LinkOff - Cleans the LinkedIn feed based on keywords and filters

LinkOff - LinkedIn Filter and Customizer 🧹 LinkOff cleans and customizes Linked

Dec 19, 2022

Another table select prompt plugin of inquirer.js, with powerful table render and filters.

inquirer-table-select-prompt Table row selection prompt for Inquirer.js 动机 现有的 inquirer.js 没有支持表格行选中的命令行交互的插件. 社区内能查找到的，只有一个二维数组的 checkbox，eduardobouc

Jan 7, 2023
Comments
  • Instagram like filters

    Instagram like filters

    Is it possible to create insta like filters under a common name? Or it's possible to create compatibility with these classes so I can create all the effects like on Instagram based on this classes ?

    opened by nhaberl 0
Owner
Jitender Bansal
((( Freelancer ))) Full stack web and mobile app developer. Worked on React, ReactNative, Laravel, Vue, and Electronjs, and MERN.
Jitender Bansal
GitHub https://bansal.io/filters-css
A JavaScript library to apply light-dark theme in web pages with the help of css variables

Theme Changer The simplest JavaScript library to apply light - dark theme in your website. First Check Out One Example How to use Files index.html sty

Abinash Karmakar 8 Dec 20, 2022
Instagram.css - Complete set of Instagram filters in pure CSS

Instagram.css Instagram.css - Pure CSS Instagram filters. You can add all these Instagram-like filters to your photos with using CSS only. Thanks to t

Yan Zhu 4k Dec 30, 2022
Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.

Tool Cool Color Picker Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. Check out the demo

Tool Cool 13 Oct 23, 2022
CSS library for Instagram filters

CSSgram CSSGram is an Instagram filter library written in Sass and CSS. What is This? Simply put, CSSgram is a library for editing your images with In

Una Kravets 5.3k Jan 4, 2023
A complete media query framework for CSS, to apply specific properties in specific screen

A complete media query framework for CSS, to apply specific properties in specific screen Note: Size of every media query is `50px, 100px, 150px, 200p

Rohit Chouhan 6 Aug 23, 2022
Change the color of an image to a specific color you have in mind.

image-recolor Run it: https://image-recolor.vercel.app/ image.recolor.mov Acknowledgments Daniel Büchele for the algorithm: https://twitter.com/daniel

Christopher Chedeau 21 Oct 25, 2022
A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

Hey Palette So you've got a color palette in Figma and you've used the Figma Tokens plugin to export that palette to JSON. Let's say you have a color

Kalo Pilato 5 Nov 15, 2022
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022
A NodeJS package to convert any RGB color to HEX color or viceversa. Also supports HSL conversion.

Unhex ?? A NodeJS package to convert any RGB color to HEX, HSL color or viceversa. Example div { color: #fff; background-color: #0070f3; } After r

Arnau Espin 2 Oct 1, 2022
🌗 1 line of code to apply auto dark / light theme and support custom theme for your website. Super fast and lightweight theme library.

themes.js A super lightweight and fast Theme library with auto system color scheme detection in JavaScript. Features Auto detect Dark / Light mode by

SerKo 4 Nov 29, 2022