Skip to content

Visual Effect Generators

Glassmorphism, Backdrop Filter, CSS Text Shadow and Gradient Maker

Generators for visual effects. Make glassmorphism and neumorphism in CSS, add film grain and halftone to images, apply photo filters, and run animated effects like plasma, lava lamps and matrix rain. Each effect is adjustable and previews live.

62 tools tagged Visual Effects

8D Audio

Rotate any song around the listener's head, 8D style.

Animated Banner

Design an animated ad banner and export GIF or WebM.

Animated Counter

Make a number count-up animation and copy the code.

Backdrop Filter Generator

Compose backdrop-filter functions and preview the result live.

Box Shadow Generator

Stack several shadow layers for depth that looks real.

Cartoon Photo Filter

Turn a photo into a cartoon with flat colours and ink lines.

Chromatic Aberration Effect

Split red, green and blue channels for a lens fringe or RGB glitch look.

CSS Noise Generator

Film-grain noise texture from an inline SVG filter, no image file.

CSS Pattern Generator

Repeating background patterns built from CSS gradients, no images.

CSS Text Shadow Generator

Visual text-shadow builder with drop, long, neon and outline presets.

CSS Transform Generator

Compose translate, rotate, scale and skew into one transform value.

Cubic Bezier

Shape a CSS easing curve and watch it animate.

Double Exposure Effect

Layer two photos into one dreamy double exposure.

Drop Cap Generator

Style a magazine drop cap for the first letter and copy the CSS.

Duotone Effect

Recolour any photo with two colours for a poster-style duotone.

Easing Comparison

Run two CSS easings side by side and copy the winner.

Film Grain & Vignette

Add Gaussian film grain and a vignette to a photo.

Fireworks

Rockets, bursts and fading sparks; click to launch; fullscreen.

Glassmorphism Generator

Frosted glass panels with backdrop-filter, previewed live.

Glitch Effect

Add RGB split, torn slices and VHS scanlines to a photo.

Gradient Maker

Linear, radial and conic CSS gradients with live preview.

Gradient Text Generator

Fill headline text with a CSS gradient and copy the code.

Green Screen Video Editor

Swap a green screen for any picture or video.

Halftone Generator

Turn a photo into a halftone dot screen in black, white or CMYK.

Image Blend Modes

Layer two images with 15 Photoshop-style blend modes and opacity.

Image Filter Sandbox

Slide eight filter functions and copy the CSS declaration.

Image Hover Zoom

Create a CSS image zoom on hover, including follow-the-pointer product zoom.

Invert Image

Invert the colours of a photo or flip only its brightness.

Kaleidoscope Effect

Mirror a slice of any photo into a symmetrical kaleidoscope pattern.

Keyframe Animator

Build and preview a CSS @keyframes animation from three stops.

Keyframe Timeline

Edit a multi-stop keyframe timeline and export the CSS.

Lava Lamp

Blobs that rise, merge and split; four colours, fullscreen.

Loading Spinner

Design a CSS loading spinner and copy the code.

Logo Reveal

Animate a wordmark reveal and copy the CSS.

Low Poly Generator

Turn a photo into geometric low poly triangle art.

Matrix Rain

Falling green code with speed, size, trail and colour; fullscreen.

Mesh Gradient Generator

Pure-CSS mesh gradients from stacked radial layers.

Neumorphism

Soft UI dual shadows from a single surface colour.

Oil Painting Effect

Turn a photo into a painterly oil painting with brush-like patches.

Old Film Effect

Make a video look like scratchy, flickering vintage film.

Photo Date Stamp

Add a glowing orange 90s film camera date stamp to any photo.

Photo To Sketch

Convert a photo into a pencil sketch, ink outline or cartoon.

Picture In Picture Video Maker

Overlay a second video in a corner window of the first.

Pixel Sort Effect

Sort runs of pixels by brightness or hue for streaky glitch art.

Plasma Effect

Swirling demoscene colour with speed, scale and palette; fullscreen.

Pop Art Generator

Turn a photo into a Warhol-style grid of bold colour panels.

Posterize Effect

Cut a photo down to a few flat colour bands for a poster look.

Reading Progress Bar

Make a scroll progress bar for articles and copy the CSS and JS.

Scroll Animation

Preview scroll reveal effects and copy the CSS or JS.

Scrollbar Styler

Custom scrollbars for Firefox and WebKit in one rule set.

SVG Path Draw

Animate SVG paths drawing themselves and copy the CSS.

Text Animation

Animate a headline letter by letter and copy the CSS.

Text Highlight Effect

Style a highlighter-pen mark on key words and copy the CSS.

Text Scramble Effect

Make a headline decode from random characters with pure CSS.

Tilt-Shift Effect

Turn a photo into a miniature-model scene with a tilt-shift blur.

VHS Effect

Make a video look like an old VHS tape or camcorder.

Video Face Blur

Automatically blur or pixelate every face in a video.

Video Glitch Effect

Add RGB split and torn-slice glitches to a video.

Video To ASCII

Turn a video into moving ASCII text art.

Video Zoom Effect

Add a smooth zoom or punch-in to any point in a video.

Vignette Effect

Darken or fade the edges of a photo to frame the subject.

Watercolour Effect

Turn a photo into a soft watercolour painting with paper texture.