# una/cssgram

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/una-cssgram).**

5,398 stars · 395 forks · HTML · MIT

## Links

- GitHub: https://github.com/una/CSSgram
- Homepage: http://una.github.io/CSSgram/
- awesome-repositories: https://awesome-repositories.com/repository/una-cssgram.md

## Description

CSSgram is a CSS image filter library and framework that provides a system of reusable mixins and classes for implementing visual image effects. It enables CSS-based image processing to modify the appearance of images directly in the browser without requiring server-side processing.

The project facilitates client-side photo processing and frontend visual styling by applying photographic style filters and color presets to web images. It uses a combination of CSS filters and blend modes to achieve these effects through the assignment of predefined class names to HTML elements.

## Tags

### Graphics & Multimedia

- [Image Visual Filters](https://awesome-repositories.com/f/graphics-multimedia/image-visual-filters.md) — Applies photographic styles and visual filters to images using CSS filters and blend modes. ([source](https://cdn.jsdelivr.net/gh/una/cssgram@master/README.md))
- [Browser-Based Image Processing](https://awesome-repositories.com/f/graphics-multimedia/browser-based-image-processing.md) — Enables modifying image appearance directly in the browser without requiring server-side processing.
- [Client-Side Image Editing](https://awesome-repositories.com/f/graphics-multimedia/client-side-image-editing.md) — Simulates professional photo editing effects directly in the browser without backend image manipulation.
- [CSS Image Filter Libraries](https://awesome-repositories.com/f/graphics-multimedia/css-image-filter-libraries.md) — Provides a collection of CSS filters and blend modes to apply photographic styles using class names.
- [CSS Blend Modes](https://awesome-repositories.com/f/graphics-multimedia/media-processing-analysis/face-portrait-manipulation/image-blending/css-blend-modes.md) — Implements photographic grading by merging color overlays with base images using CSS background-blend-mode.
- [CSS Visual Compositing](https://awesome-repositories.com/f/graphics-multimedia/css-visual-compositing.md) — Combines multiple graphical effects like blur and contrast into single composite CSS properties for images.

### User Interface & Experience

- [CSS Filter Effects](https://awesome-repositories.com/f/user-interface-experience/background-effects/background-visual-effects/canvas-visual-effects/css-filter-effects.md) — Provides a framework of reusable mixins and classes for implementing visual image effects via CSS filters.
- [Declarative Styling Systems](https://awesome-repositories.com/f/user-interface-experience/common-ui-element-styling/declarative-styling-systems.md) — Provides a declarative system to apply photographic looks by adding simple class names to HTML elements.
- [CSS Class-Based Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling.md) — Creates consistent aesthetic looks for website imagery through a system of reusable CSS classes.
- [Semantic Class Mapping](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling/class-name-annotations/semantic-class-mapping.md) — Maps semantic, human-readable class names to specific CSS filter and blend mode value strings.

### Development Tools & Productivity

- [Style Mixins](https://awesome-repositories.com/f/development-tools-productivity/style-mixins.md) — Uses Sass mixins to generate reusable CSS blocks for applying complex filter sets.

### Part of an Awesome List

- [CSS Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/css-libraries.md) — CSS-based image filter library for web content.