135 CSS Image Effects

This Rounded Triangle CSS Image Mask offers a mathematically perfect way to shape visuals into equilateral triangles with soft, professional edges. It is an ideal choice for high-end portfolio galleries, creative team sections, or landing pages where standard rectangular or circular crops feel too conventional. By leveraging modern CSS math, the shape remains perfectly symmetrical regardless of the image dimensions.

The Border Image Fill Gradient Overlay is a minimalist CSS technique used to add a decorative or functional gradient over background images. Unlike traditional methods that require extra HTML markup or ::before/::after pseudo-elements, this approach uses a single, underutilized property to enhance text contrast and visual depth.

A pure CSS “pop-out” avatar effect utilizing CSS variables to orchestrate a scale transition.

Images take on an aesthetic, modern squircle shape (resembling iOS icons) with a soft drop shadow that perfectly follows their contour.

Images appear as jigsaw puzzle pieces with interlocking edges that can visually fit together.

A pure CSS duotone filter effect achieved by stacking layers with mix-blend-mode. The image is set to darken against a colored container, while an overlay pseudo-element uses lighten to tint the highlights, creating a cohesive two-color aesthetic controlled by SCSS variables.

Hovering over the grid triggers a light flare sweep, transforming the images from a distorted, stretched state into their sharp, original form, creating a futuristic transition effect.

Live demo showcasing dynamic mix-blend-mode and background-blend-mode combinations. Interactive 3D tilt and SVG turbulence distortion trigger on hover.

A border effect for an <img> tag - the size of the decorative edge, created with repeating-conic-gradient and -webkit-mask, is dynamically calculated via a complex calc() function controlled by CSS variables.

Creating a “grainy” edge effect for a circular image using SVG filters. The effect is achieved through a complex combination of feGaussianBlur and feTurbulence primitives with multiple feComposite operations to control the alpha channel.

A 3D image tilt effect that mimics cursor movement, achieved purely with CSS by combining multiple invisible overlay zones, the general sibling combinator, and the transform: rotate3d() function with perspective on the parent container.

Dynamic, JavaScript-free image recoloring utilizes the <input type

Explore the power of CSS Grid with auto-fit for a responsive layout and SVG filtering techniques to give images a trendy squircle outline and unique shadow effect.

The key feature is the control of animation parameters via CSS variables, which allows for easy changes to the speed and intensity of the glitch. The animation itself is built on three layered elements, each with unique offsets, shadows, and clipping animations (@keyframes glitch-top/bottom).

A sleek squircle avatar implementation using CSS clip-path referencing an inline SVG definition. The technique applies a superellipse mask to a background image, creating a modern, iOS-style rounded shape that scales responsively while maintaining its geometry.

An impressive pure CSS holographic effect utilizing mix-blend-mode and fixed background gradients to create iridescent “living” masks. This lightweight approach serves as a performant alternative to WebGL for building scroll-reactive UI elements with deep visual textures.

A demonstration of smooth progressive image blurring using the CSS @property feature to define animatable custom variables. The effect is achieved by layering a blurred pseudo-element with a mask-image: linear-gradient() mask, creating a dynamic focus effect on hover.