Video Effects

Apply visual effects to video using standard CSS. The video element renders to a canvas, so all CSS properties apply directly.

CSS Filters

Use Tailwind filter utilities or inline styles:

Common filter classes:

Effect	Class	Description
Blur	blur-sm / blur-md / blur-lg	Gaussian blur
Brightness	brightness-50 / brightness-150	Darken or lighten
Contrast	contrast-50 / contrast-150	Reduce or increase contrast
Grayscale	grayscale	Full desaturation
Sepia	sepia	Warm vintage tone
Saturate	saturate-50 / saturate-200	Color intensity

Combine multiple filters by listing classes:

<ef-video src="video.mp4" class="grayscale contrast-125 brightness-110 size-full"></ef-video>

CSS Transforms

Scale and rotate video elements:

CSS Animations

Animate any CSS property over time using @keyframes:

Animations run relative to the video's timeline — they're fully scrubbable.

Combining Effects

Layer static filters with animations for complex looks: