Apply CSS filters to images to create visual effects without external editing tools.
Filter Presets
tsx
import { Image } from "@reactslides/shared-ui";
<Image src="photo.jpg" alt="Photo" filter="grayscale" />
<Image src="photo.jpg" alt="Photo" filter="sepia" />
<Image src="photo.jpg" alt="Photo" filter="blur" />
<Image src="photo.jpg" alt="Photo" filter="brightness" />
<Image src="photo.jpg" alt="Photo" filter="contrast" />Available filters:
• none
• grayscale
• sepia
• blur
• brightness
• contrast
• saturate
• hue-rotate
• invert
• opacity
• drop-shadow
Custom Filters
tsx
<Image
src="photo.jpg"
alt="Photo"
customFilter="brightness(80%) contrast(110%) saturate(120%)"
/>Color Overlay
tsx
{/* Blue tint overlay */}
<Image
src="photo.jpg"
alt="Blue tinted"
overlay="#3b82f6"
overlayOpacity={0.4}
/>