From 66b2b8c3cfa9bd62bc290b52a128fde616545534 Mon Sep 17 00:00:00 2001
From: Osei Fortune <fortune.osei@yahoo.com>
Date: Wed, 18 Feb 2026 03:18:49 -0400
Subject: [PATCH 1/4] feat: css filter

---
 apps/toolbox/src/main-page.xml                |    1 +
 apps/toolbox/src/pages/filters.ts             |  256 ++++
 apps/toolbox/src/pages/filters.xml            |  266 ++++
 .../core/platforms/ios/src/CSSFilters.swift   |  877 ++++++++++++
 packages/core/ui/core/view/index.android.ts   |   14 +-
 packages/core/ui/core/view/index.ios.ts       |   15 +-
 packages/core/ui/styling/style-properties.ts  |    6 +
 packages/core/ui/styling/style/index.ts       |    2 +-
 packages/core/ui/text-base/index.android.ts   |    2 +-
 .../ios/objc-x86_64/objc!nsswiftsupport.d.ts  |   19 +
 packages/ui-mobile-base/android/build.gradle  |    2 +-
 .../widgetdemo/src/main/AndroidManifest.xml   |    5 +-
 .../nativescript/widgetsdemo/MainActivity.kt  |  143 +-
 .../android/widgets/build.gradle              |    9 +
 .../org/nativescript/widgets/CSSFilters.kt    | 1176 +++++++++++++++++
 .../java/org/nativescript/widgets/Colors.kt   |   29 +
 .../org/nativescript/widgets/ImageView.java   |   42 +
 .../org/nativescript/widgets/LayoutBase.java  |   41 +
 .../widgets/StyleableTextView.java            |   55 +-
 .../org/nativescript/widgets/ViewUtils.kt     |   63 +
 .../widgets/src/main/res/values/ids.xml       |    4 +
 21 files changed, 3016 insertions(+), 11 deletions(-)
 create mode 100644 apps/toolbox/src/pages/filters.ts
 create mode 100644 apps/toolbox/src/pages/filters.xml
 create mode 100644 packages/core/platforms/ios/src/CSSFilters.swift
 create mode 100644 packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/CSSFilters.kt
 create mode 100644 packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/Colors.kt
 create mode 100644 packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ViewUtils.kt
 create mode 100644 packages/ui-mobile-base/android/widgets/src/main/res/values/ids.xml

diff --git a/apps/toolbox/src/main-page.xml b/apps/toolbox/src/main-page.xml
index d8ef87cba3..9a486eaa6e 100644
--- a/apps/toolbox/src/main-page.xml
+++ b/apps/toolbox/src/main-page.xml
@@ -34,6 +34,7 @@
         <Button text="webview" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="winter-tc" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="ete" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="filters" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
       </StackLayout>
     </ScrollView>
   </StackLayout>
diff --git a/apps/toolbox/src/pages/filters.ts b/apps/toolbox/src/pages/filters.ts
new file mode 100644
index 0000000000..16810258ca
--- /dev/null
+++ b/apps/toolbox/src/pages/filters.ts
@@ -0,0 +1,256 @@
+import { Observable, EventData, Page, View, Screen } from '@nativescript/core';
+
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new FilterModel();
+}
+
+export class FilterModel extends Observable {
+	width = 0;
+	height = 0;
+	constructor() {
+		super();
+		this.width = Screen.mainScreen.widthPixels;
+		this.height = Screen.mainScreen.heightPixels;
+	}
+
+	get blurSrc() {
+		return `https://picsum.photos/seed/blur/${this.width}/${this.height}`;
+	}
+
+	get greySrc() {
+		return `https://picsum.photos/seed/grey/${this.width}/${this.height}`;
+	}
+
+	get sepiaSrc() {
+		return `https://picsum.photos/seed/sepia/${this.width}/${this.height}`;
+	}
+
+	get brightnessSrc() {
+		return `https://picsum.photos/seed/brightness/${this.width}/${this.height}`;
+	}
+
+	get contrastSrc() {
+		return `https://picsum.photos/seed/contrast/${this.width}/${this.height}`;
+	}
+
+	get saturateSrc() {
+		return `https://picsum.photos/seed/saturate/${this.width}/${this.height}`;
+	}
+
+	get hueSrc() {
+		return `https://picsum.photos/seed/hue/${this.width}/${this.height}`;
+	}
+
+	get invertSrc() {
+		return `https://picsum.photos/seed/invert/${this.width}/${this.height}`;
+	}
+
+	get sepiaBrightnessSrc() {
+		return `https://picsum.photos/seed/sepiaBrightness/${this.width}/${this.height}`;
+	}
+
+	get imageSrc() {
+		return `https://picsum.photos/${this.width}/${this.height}?random=${Math.floor(Math.random() * 1000)}`;
+	}
+}
+
+function animateFilter(view: View, duration: number, stepFn: (progress: number) => string): Promise<void> {
+	return new Promise((resolve) => {
+		const frameTime = 16;
+		const steps = Math.ceil(duration / frameTime);
+		let step = 0;
+
+		let id;
+		const doFrame = () => {
+			step++;
+			const progress = step / steps;
+			view.style.filter = stepFn(Math.min(progress, 1));
+
+			if (step >= steps) {
+				cancelAnimationFrame(id);
+				resolve();
+			} else {
+				requestAnimationFrame(doFrame);
+			}
+		};
+		id = requestAnimationFrame(doFrame);
+	});
+}
+
+export async function onAnimateBlur(args: EventData) {
+	const label = page.getViewById<View>('blurAnimLabel');
+	if (!label) return;
+
+	// blur in: 0 -> 15 over 600ms
+	await animateFilter(label, 600, (p) => `blur(${p * 15})`);
+	// blur out: 15 -> 0 over 600ms
+	await animateFilter(label, 600, (p) => `blur(${(1 - p) * 15})`);
+	label.style.filter = '';
+}
+
+export async function onPulseBlur(args: EventData) {
+	const image = page.getViewById<View>('blurAnimImage');
+	if (!image) return;
+
+	for (let i = 0; i < 3; i++) {
+		await animateFilter(image, 300, (p) => `blur(${p * 10})`);
+		await animateFilter(image, 300, (p) => `blur(${(1 - p) * 10})`);
+	}
+	image.style.filter = '';
+}
+
+export async function onAnimateBlurGray(args: EventData) {
+	const container = page.getViewById<View>('blurGrayContainer');
+	if (!container) return;
+
+	// animate blur 0->10 and grayscale 0%->100% together
+	await animateFilter(container, 800, (p) => `blur(${p * 10}) grayscale(${p * 100}%)`);
+	// animate back
+	await animateFilter(container, 800, (p) => `blur(${(1 - p) * 10}) grayscale(${(1 - p) * 100}%)`);
+	container.style.filter = '';
+}
+
+export async function onBreatheBrightness(args: EventData) {
+	const container = page.getViewById<View>('brightnessContainer');
+	if (!container) return;
+
+	for (let i = 0; i < 3; i++) {
+		// dim down: 1.0 -> 0.3
+		await animateFilter(container, 500, (p) => `brightness(${1.0 - p * 0.7})`);
+		// brighten up: 0.3 -> 1.5
+		await animateFilter(container, 500, (p) => `brightness(${0.3 + p * 1.2})`);
+		// settle back: 1.5 -> 1.0
+		await animateFilter(container, 300, (p) => `brightness(${1.5 - p * 0.5})`);
+	}
+	container.style.filter = '';
+}
+
+export async function onSweepHue(args: EventData) {
+	const container = page.getViewById<View>('hueContainer');
+	if (!container) return;
+
+	// sweep 0 -> 360 degrees
+	await animateFilter(container, 2000, (p) => `hue-rotate(${p * 360}deg)`);
+	container.style.filter = '';
+}
+
+export async function onFadeSepia(args: EventData) {
+	const view = page.getViewById<View>('sepiaAnim');
+	if (!view) return;
+
+	// fade in: 0% -> 100%
+	await animateFilter(view, 800, (p) => `sepia(${p * 100}%)`);
+	// hold
+	await new Promise((r) => setTimeout(r, 400));
+	// fade out: 100% -> 0%
+	await animateFilter(view, 800, (p) => `sepia(${(1 - p) * 100}%)`);
+	view.style.filter = '';
+}
+
+export async function onFlashInvert(args: EventData) {
+	const label = page.getViewById<View>('invertAnim');
+	if (!label) return;
+
+	for (let i = 0; i < 4; i++) {
+		await animateFilter(label, 150, (p) => `invert(${p * 100}%)`);
+		await animateFilter(label, 150, (p) => `invert(${(1 - p) * 100}%)`);
+	}
+	label.style.filter = '';
+}
+
+export async function onGrowShadow(args: EventData) {
+	const label = page.getViewById<View>('shadowAnim');
+	if (!label) return;
+
+	// grow shadow: offset and blur increase
+	await animateFilter(label, 800, (p) => {
+		const offset = p * 15;
+		const blur = p * 20;
+		return `drop-shadow(${offset} ${offset} ${blur} rgba(0,0,0,0.6))`;
+	});
+	// shrink shadow back
+	await animateFilter(label, 800, (p) => {
+		const offset = (1 - p) * 15;
+		const blur = (1 - p) * 20;
+		return `drop-shadow(${offset} ${offset} ${blur} rgba(0,0,0,0.6))`;
+	});
+	label.style.filter = '';
+}
+
+export async function onCascade(args: EventData) {
+	const container = page.getViewById<View>('cascadeContainer');
+	if (!container) return;
+
+	// phase 1: blur in
+	await animateFilter(container, 500, (p) => `blur(${p * 8})`);
+	// phase 2: add grayscale while blurred
+	await animateFilter(container, 500, (p) => `blur(8) grayscale(${p * 100}%)`);
+	// phase 3: add sepia while blurred + gray
+	await animateFilter(container, 500, (p) => `blur(8) grayscale(100%) sepia(${p * 100}%)`);
+	// phase 4: unwind everything together
+	await animateFilter(container, 1000, (p) => {
+		const inv = 1 - p;
+		return `blur(${inv * 8}) grayscale(${inv * 100}%) sepia(${inv * 100}%)`;
+	});
+	container.style.filter = '';
+}
+
+export async function onPulseContrast(args: EventData) {
+	const container = page.getViewById<View>('contrastContainer');
+	if (!container) return;
+
+	for (let i = 0; i < 3; i++) {
+		// increase contrast: 100% -> 300%
+		await animateFilter(container, 400, (p) => `contrast(${100 + p * 200}%)`);
+		// decrease contrast: 300% -> 100%
+		await animateFilter(container, 400, (p) => `contrast(${300 - p * 200}%)`);
+	}
+	container.style.filter = '';
+}
+
+export async function onWaveSaturation(args: EventData) {
+	const container = page.getViewById<View>('saturateContainer');
+	if (!container) return;
+
+	for (let i = 0; i < 2; i++) {
+		// desaturate: 100% -> 0%
+		await animateFilter(container, 500, (p) => `saturate(${100 - p * 100}%)`);
+		// oversaturate: 0% -> 400%
+		await animateFilter(container, 500, (p) => `saturate(${p * 400}%)`);
+		// settle back: 400% -> 100%
+		await animateFilter(container, 400, (p) => `saturate(${400 - p * 300}%)`);
+	}
+	container.style.filter = '';
+}
+
+export async function onFullSpectrum(args: EventData) {
+	const container = page.getViewById<View>('spectrumContainer');
+	if (!container) return;
+
+	// 1. Blur in
+	await animateFilter(container, 400, (p) => `blur(${p * 5})`);
+
+	// 2. Add brightness while blurred
+	await animateFilter(container, 400, (p) => `blur(5) brightness(${1 + p * 0.5})`);
+
+	// 3. Add hue rotation
+	await animateFilter(container, 600, (p) => `blur(5) brightness(1.5) hue-rotate(${p * 180}deg)`);
+
+	// 4. Transition to sepia + drop shadow
+	await animateFilter(container, 500, (p) => `blur(${5 - p * 5}) sepia(${p * 100}%) drop-shadow(${p * 5}px ${p * 5}px ${p * 10}px rgba(0,0,0,0.5))`);
+
+	// 5. Flash invert
+	await animateFilter(container, 200, (p) => `sepia(100%) invert(${p * 100}%) drop-shadow(5px 5px 10px rgba(0,0,0,0.5))`);
+	await animateFilter(container, 200, (p) => `sepia(100%) invert(${(1 - p) * 100}%) drop-shadow(5px 5px 10px rgba(0,0,0,0.5))`);
+
+	// 6. Fade out all effects
+	await animateFilter(container, 800, (p) => {
+		const inv = 1 - p;
+		return `sepia(${inv * 100}%) drop-shadow(${inv * 5}px ${inv * 5}px ${inv * 10}px rgba(0,0,0,${inv * 0.5}))`;
+	});
+
+	container.style.filter = '';
+}
diff --git a/apps/toolbox/src/pages/filters.xml b/apps/toolbox/src/pages/filters.xml
new file mode 100644
index 0000000000..953822b95a
--- /dev/null
+++ b/apps/toolbox/src/pages/filters.xml
@@ -0,0 +1,266 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="CSS Filters" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <ScrollView>
+        <StackLayout padding="10">
+
+            <!-- ========== STATIC FILTER EXAMPLES ========== -->
+            <Label text="Static Filters" class="h2" marginBottom="10" fontWeight="bold" />
+
+            <!-- Blur comparison -->
+            <Label text="blur(5px)" class="h3" marginTop="10" />
+            <GridLayout columns="*, *" rows="auto" marginBottom="10">
+                <StackLayout col="0" backgroundColor="#ecf0f1" padding="15" margin="2">
+                    <Label text="Normal" fontSize="12" color="#666" textAlignment="center" />
+                    <Label text="Sample Text" fontSize="20" textAlignment="center" />
+                </StackLayout>
+                <StackLayout col="1" style="filter: blur(5px);" backgroundColor="#ecf0f1" padding="15" margin="2">
+                    <Label text="Filtered" fontSize="12" color="#666" textAlignment="center" />
+                    <Label text="Sample Text" fontSize="20" textAlignment="center" />
+                </StackLayout>
+            </GridLayout>
+
+            <!-- Grayscale comparison -->
+            <Label text="grayscale(100%)" class="h3" marginTop="10" />
+            <GridLayout columns="*, *" rows="auto" marginBottom="10">
+                <StackLayout col="0" backgroundColor="#e74c3c" padding="15" margin="2">
+                    <Label text="Normal" fontSize="12" color="white" textAlignment="center" />
+                    <Image src="{{greySrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+                <StackLayout col="1" style="filter: grayscale(100%);" backgroundColor="#e74c3c" padding="15" margin="2">
+                    <Label text="Filtered" fontSize="12" color="white" textAlignment="center" />
+                    <Image src="{{greySrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+            </GridLayout>
+
+            <!-- Sepia comparison -->
+            <Label text="sepia(100%)" class="h3" marginTop="10" />
+            <GridLayout columns="*, *" rows="auto" marginBottom="10">
+                <StackLayout col="0" backgroundColor="#3498db" padding="15" margin="2">
+                    <Label text="Normal" fontSize="12" color="white" textAlignment="center" />
+                    <Image src="{{sepiaSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+                <StackLayout col="1" style="filter: sepia(100%);" backgroundColor="#3498db" padding="15" margin="2">
+                    <Label text="Filtered" fontSize="12" color="white" textAlignment="center" />
+                    <Image src="{{sepiaSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+            </GridLayout>
+
+            <!-- Brightness comparison -->
+            <Label text="brightness(1.5) vs brightness(0.5)" class="h3" marginTop="10" />
+            <GridLayout columns="*, *, *" rows="auto" marginBottom="10">
+                <StackLayout col="0" backgroundColor="#2c3e50" padding="15" margin="2">
+                    <Label text="Normal" fontSize="10" color="white" textAlignment="center" />
+                    <Image src="{{imageSrc}}" height="60" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+                <StackLayout col="1" style="filter: brightness(1.5);" backgroundColor="#2c3e50" padding="15" margin="2">
+                    <Label text="Bright 1.5" fontSize="10" color="white" textAlignment="center" />
+                    <Image src="{{brightnessSrc}}" height="60" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+                <StackLayout col="2" style="filter: brightness(0.5);" backgroundColor="#2c3e50" padding="15" margin="2">
+                    <Label text="Dim 0.5" fontSize="10" color="white" textAlignment="center" />
+                    <Image src="{{brightnessSrc}}" height="60" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+            </GridLayout>
+
+            <!-- Contrast comparison -->
+            <Label text="contrast(200%)" class="h3" marginTop="10" />
+            <GridLayout columns="*, *" rows="auto" marginBottom="10">
+                <StackLayout col="0" backgroundColor="#95a5a6" padding="15" margin="2">
+                    <Label text="Normal" fontSize="12" color="red" textAlignment="center" />
+                    <Image src="{{contrastSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+                <StackLayout col="1" style="filter: contrast(200%);" backgroundColor="#95a5a6" padding="15" margin="2">
+                    <Label text="Filtered" fontSize="12" color="red" textAlignment="center" />
+                    <Image src="{{contrastSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+            </GridLayout>
+
+            <!-- Saturate comparison -->
+            <Label text="saturate(300%)" class="h3" marginTop="10" />
+            <GridLayout columns="*, *" rows="auto" marginBottom="10">
+                <StackLayout col="0" backgroundColor="#9b59b6" padding="15" margin="2">
+                    <Label text="Normal" fontSize="12" color="white" textAlignment="center" />
+                    <Image src="{{saturateSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+                <StackLayout col="1" style="filter: saturate(300%);" backgroundColor="#9b59b6" padding="15" margin="2">
+                    <Label text="Filtered" fontSize="12" color="white" textAlignment="center" />
+                    <Image src="{{saturateSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+            </GridLayout>
+
+            <!-- Hue Rotate comparison -->
+            <Label text="hue-rotate(180deg)" class="h3" marginTop="10" />
+            <GridLayout columns="*, *" rows="auto" marginBottom="10">
+                <StackLayout col="0" backgroundColor="#1abc9c" padding="15" margin="2">
+                    <Label text="Normal" fontSize="12" color="white" textAlignment="center" />
+                    <Image src="{{hueSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+                <StackLayout col="1" style="filter: hue-rotate(180deg);" backgroundColor="#1abc9c" padding="15" margin="2">
+                    <Label text="Filtered" fontSize="12" color="white" textAlignment="center" />
+                    <Image src="{{hueSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+            </GridLayout>
+
+            <!-- Invert comparison -->
+            <Label text="invert(100%)" class="h3" marginTop="10" />
+            <GridLayout columns="*, *" rows="auto" marginBottom="10">
+                <StackLayout col="0" backgroundColor="#34495e" padding="15" margin="2">
+                    <Label text="Normal" fontSize="12" color="white" textAlignment="center" />
+                    <Image src="{{invertSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+                <StackLayout col="1" style="filter: invert(100%);" backgroundColor="#34495e" padding="15" margin="2">
+                    <Label text="Filtered" fontSize="12" color="white" textAlignment="center" />
+                    <Image src="{{invertSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+            </GridLayout>
+
+            <!-- Drop Shadow comparison -->
+            <Label text="drop-shadow(4px 4px 8px #000)" class="h3" marginTop="10" />
+            <GridLayout columns="*, *" rows="auto" marginBottom="10">
+                <StackLayout col="0" backgroundColor="#16a085" padding="20" margin="2">
+                    <Label text="Normal" fontSize="12" color="white" textAlignment="center" />
+                    <Label text="Shadow" fontSize="20" color="white" textAlignment="center" marginTop="5" />
+                </StackLayout>
+                <StackLayout col="1" style="filter: drop-shadow(4px 4px 8px #000000);" backgroundColor="#16a085" padding="20" margin="2">
+                    <Label text="Filtered" fontSize="12" color="white" textAlignment="center" />
+                    <Label text="Shadow" fontSize="20" color="white" textAlignment="center" marginTop="5" />
+                </StackLayout>
+            </GridLayout>
+
+            <!-- Combined: blur + grayscale -->
+            <Label text="blur(2px) grayscale(50%)" class="h3" marginTop="10" />
+            <GridLayout columns="*, *" rows="auto" marginBottom="10">
+                <Image col="0" src="{{blurSrc}}" height="120" stretch="aspectFill" margin="2" />
+                <Image col="1" style="filter: blur(2px) grayscale(50%);" src="{{blurSrc}}" height="120" stretch="aspectFill" margin="2" />
+            </GridLayout>
+
+            <!-- Combined: contrast + saturate -->
+            <Label text="contrast(150%) saturate(150%)" class="h3" marginTop="10" />
+            <GridLayout columns="*, *" rows="auto" marginBottom="10">
+                <StackLayout col="0" backgroundColor="#27ae60" padding="10" margin="2">
+                    <Label text="Normal" fontSize="10" color="white" textAlignment="center" />
+                    <Image src="{{saturateSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+                <StackLayout col="1" style="filter: contrast(150%) saturate(150%);" backgroundColor="#27ae60" padding="10" margin="2">
+                    <Label text="Filtered" fontSize="10" color="white" textAlignment="center" />
+                    <Image src="{{saturateSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+            </GridLayout>
+
+            <!-- Combined: sepia + brightness -->
+            <Label text="sepia(50%) brightness(1.2)" class="h3" marginTop="10" />
+            <GridLayout columns="*, *" rows="auto" marginBottom="10">
+                <StackLayout col="0" backgroundColor="#8e44ad" padding="10" margin="2">
+                    <Label text="Normal" fontSize="10" color="white" textAlignment="center" />
+                    <Image src="{{sepiaBrightnessSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+                <StackLayout col="1" style="filter: sepia(50%) brightness(1.2);" backgroundColor="#8e44ad" padding="10" margin="2">
+                    <Label text="Filtered" fontSize="10" color="white" textAlignment="center" />
+                    <Image src="{{sepiaBrightnessSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                </StackLayout>
+            </GridLayout>
+
+            <!-- ========== ANIMATED FILTER EXAMPLES ========== -->
+            <Label text="Animated Filters" class="h2" marginTop="30" marginBottom="10" fontWeight="bold" />
+
+            <!-- Blur Animation (Label only) -->
+            <Label text="Blur Animation - Label" class="h3" marginTop="10" />
+            <StackLayout backgroundColor="#9b59b6" padding="20">
+                <Label id="blurAnimLabel" text="Blurring Text" color="white" fontSize="24" textAlignment="center" />
+                <Button text="Animate Blur" tap="onAnimateBlur" marginTop="10" />
+            </StackLayout>
+
+            <!-- Pulse Blur on Image -->
+            <Label text="Pulse Blur - Image" class="h3" marginTop="10" />
+            <StackLayout backgroundColor="#2c3e50" padding="20">
+                <Image id="blurAnimImage" src="{{imageSrc}}" height="150" stretch="aspectFill" />
+                <Button text="Pulse Blur" tap="onPulseBlur" marginTop="10" />
+            </StackLayout>
+
+            <!-- Blur + Grayscale Animation (Parent View) -->
+            <Label text="Blur + Grayscale - Parent View" class="h3" marginTop="10" />
+            <StackLayout id="blurGrayContainer" backgroundColor="#1abc9c" padding="20">
+                <Label text="Combo Animation" color="white" fontSize="24" textAlignment="center" />
+                <Image src="{{imageSrc}}" height="120" stretch="aspectFill" marginTop="10" />
+                <Button text="Animate Blur + Gray" tap="onAnimateBlurGray" marginTop="10" />
+            </StackLayout>
+
+            <!-- Brightness Breathing (Parent View) -->
+            <Label text="Brightness Breathing - Parent View" class="h3" marginTop="10" />
+            <StackLayout id="brightnessContainer" backgroundColor="#e74c3c" padding="20">
+                <Label text="Breathing Light" color="white" fontSize="24" textAlignment="center" />
+                <Button text="Breathe Brightness" tap="onBreatheBrightness" marginTop="10" />
+            </StackLayout>
+
+            <!-- Hue Sweep (Parent View with Image) -->
+            <Label text="Hue Rotation - Parent View" class="h3" marginTop="10" />
+            <StackLayout id="hueContainer" backgroundColor="#3498db" padding="20">
+                <Label text="Color Sweep" color="white" fontSize="24" textAlignment="center" />
+                <Image src="{{imageSrc}}" height="80" stretch="aspectFill" marginTop="10" />
+                <Button text="Sweep Hue" tap="onSweepHue" marginTop="10" />
+            </StackLayout>
+
+            <!-- Sepia Fade (Label only) -->
+            <Label text="Sepia Fade - Label" class="h3" marginTop="10" />
+            <StackLayout backgroundColor="#27ae60" padding="20">
+                <Image id="sepiaAnim" src="{{imageSrc}}" height="80" stretch="aspectFill" marginTop="5" />
+                <Label text="Vintage Fade" color="white" fontSize="24" textAlignment="center" />
+                <Button text="Fade Sepia" tap="onFadeSepia" marginTop="10" />
+            </StackLayout>
+
+            <!-- Invert Flash (Label only) -->
+            <Label text="Invert Flash - Label" class="h3" marginTop="10" />
+            <StackLayout backgroundColor="#f39c12" padding="20">
+                <Label id="invertAnim" text="Flash Invert" color="white" fontSize="24" textAlignment="center" />
+                <Button text="Flash Invert" tap="onFlashInvert" marginTop="10" />
+            </StackLayout>
+
+            <!-- Drop Shadow Grow (Label only) -->
+            <Label text="Drop Shadow Grow - Label" class="h3" marginTop="10" />
+            <StackLayout backgroundColor="#3498db" padding="20">
+                <Label style="filter: drop-shadow(3px 3px 10px #000000);" id="shadowAnim" text="Growing Shadow" color="white" fontSize="24" textAlignment="center" />
+                <Button text="Grow Shadow" tap="onGrowShadow" marginTop="10" />
+            </StackLayout>
+
+            <!-- Contrast Pulse (Parent View) -->
+            <Label text="Contrast Pulse - Parent View" class="h3" marginTop="10" />
+            <StackLayout id="contrastContainer" backgroundColor="#95a5a6" padding="20">
+                <Label text="Contrast Pulse" color="white" fontSize="24" textAlignment="center" />
+                <Image src="{{imageSrc}}" height="80" stretch="aspectFill" marginTop="10" />
+                <Button text="Pulse Contrast" tap="onPulseContrast" marginTop="10" />
+            </StackLayout>
+
+            <!-- Saturation Wave (Parent View with Image) -->
+            <Label text="Saturation Wave - Parent View" class="h3" marginTop="10" />
+            <StackLayout id="saturateContainer" backgroundColor="#e67e22" padding="20">
+                <Label text="Saturation Wave" color="white" fontSize="24" textAlignment="center" />
+                <Image src="{{imageSrc}}" height="80" stretch="aspectFill" marginTop="10" />
+                <Button text="Wave Saturation" tap="onWaveSaturation" marginTop="10" />
+            </StackLayout>
+
+            <!-- Multi-Filter Cascade (Parent View) -->
+            <Label text="Multi-Filter Cascade - Parent View" class="h3" marginTop="10" />
+            <StackLayout id="cascadeContainer" backgroundColor="#8e44ad" padding="20">
+                <Label text="Filter Cascade" color="white" fontSize="24" textAlignment="center" />
+                <Image src="{{imageSrc}}" height="80" stretch="aspectFill" marginTop="10" />
+                <Button text="Run Cascade" tap="onCascade" marginTop="10" />
+            </StackLayout>
+
+            <!-- Full Spectrum Animation (Parent View) -->
+            <Label text="Full Spectrum - Parent View" class="h3" marginTop="10" />
+            <StackLayout id="spectrumContainer" backgroundColor="#16a085" padding="20">
+                <Label text="Full Spectrum" color="white" fontSize="24" textAlignment="center" />
+                <Image src="{{imageSrc}}" height="80" stretch="aspectFill" marginTop="10" />
+                <Button text="Run Spectrum" tap="onFullSpectrum" marginTop="10" />
+            </StackLayout>
+
+            <!-- Spacer at bottom -->
+            <StackLayout height="50" />
+
+        </StackLayout>
+    </ScrollView>
+</Page>
diff --git a/packages/core/platforms/ios/src/CSSFilters.swift b/packages/core/platforms/ios/src/CSSFilters.swift
new file mode 100644
index 0000000000..248113cd0e
--- /dev/null
+++ b/packages/core/platforms/ios/src/CSSFilters.swift
@@ -0,0 +1,877 @@
+//
+//  CSSFilters.swift
+//  NativeScript
+//
+//  Created by Osei Fortune on 17/02/2026.
+//
+
+import UIKit
+import CoreImage
+import CoreImage.CIFilterBuiltins
+import MetalKit
+import MetalPerformanceShaders
+
+
+// MARK: - Color Map
+internal let colorMap: [String: UIColor] = [
+  "crimson": UIColor(red: 220/255, green: 20/255, blue: 60/255, alpha: 1),
+  "skyblue": UIColor(red: 135/255, green: 206/255, blue: 235/255, alpha: 1),
+  "black": .black,
+  "silver": UIColor(white: 0.75, alpha: 1),
+  "gray": .gray,
+  "grey": .gray,
+  "white": .white,
+  "maroon": UIColor(red: 0.5, green: 0, blue: 0, alpha: 1),
+  "red": .red,
+  "purple": UIColor(red: 0.5, green: 0, blue: 0.5, alpha: 1),
+  "fuchsia": .magenta,
+  "green": .green,
+  "lime": UIColor(red: 0, green: 1, blue: 0, alpha: 1),
+  "olive": UIColor(red: 0.5, green: 0.5, blue: 0, alpha: 1),
+  "yellow": .yellow,
+  "navy": UIColor(red: 0, green: 0, blue: 0.5, alpha: 1),
+  "blue": .blue,
+  "teal": UIColor(red: 0, green: 0.5, blue: 0.5, alpha: 1),
+  "aqua": .cyan,
+  "orange": .orange,
+  "brown": UIColor(red: 0.65, green: 0.16, blue: 0.16, alpha: 1),
+  "pink": UIColor.systemPink,
+  "transparent": .clear
+]
+
+
+public class CSSFilters: NSObject {
+  
+  enum Filter {
+    case blur(radius: CGFloat)
+    case brightness(value: CGFloat)
+    case contrast(value: CGFloat)
+    case saturate(value: CGFloat)
+    case hueRotate(degrees: CGFloat)
+    case invert(amount: CGFloat)
+    case opacity(amount: CGFloat)
+    case sepia(amount: CGFloat)
+    case grayscale(amount: CGFloat)
+    case dropShadow(offsetX: CGFloat, offsetY: CGFloat, blur: CGFloat, color: UIColor)
+  }
+  
+  
+  private static var device: MTLDevice?
+  private static var commandQueue: MTLCommandQueue?
+  private static var ciContext: CIContext?
+  
+  
+  private static var textureLoader: MTKTextureLoader?
+  
+  // MARK: - MPS Texture Helpers
+
+  private static func createTexture(from ciImage: CIImage, context: CIContext, device: MTLDevice, commandQueue: MTLCommandQueue) -> MTLTexture? {
+    let width = Int(ciImage.extent.width)
+    let height = Int(ciImage.extent.height)
+    guard width > 0 && height > 0 else { return nil }
+    
+    let descriptor = MTLTextureDescriptor.texture2DDescriptor(
+      pixelFormat: .bgra8Unorm,
+      width: width,
+      height: height,
+      mipmapped: false
+    )
+    descriptor.usage = [.shaderRead, .shaderWrite]
+    descriptor.storageMode = .shared
+    
+    guard let texture = device.makeTexture(descriptor: descriptor) else { return nil }
+    
+    let normalizedImage = ciImage.transformed(by: CGAffineTransform(
+      translationX: -ciImage.extent.origin.x,
+      y: -ciImage.extent.origin.y
+    ))
+    
+    let colorSpace = CGColorSpaceCreateDeviceRGB()
+    guard let commandBuffer = commandQueue.makeCommandBuffer() else { return nil }
+    context.render(
+      normalizedImage,
+      to: texture,
+      commandBuffer: commandBuffer,
+      bounds: CGRect(origin: .zero, size: ciImage.extent.size),
+      colorSpace: colorSpace
+    )
+    commandBuffer.commit()
+    commandBuffer.waitUntilCompleted()
+    
+    return texture
+  }
+  
+  private static func createCIImage(from texture: MTLTexture, extent: CGRect) -> CIImage? {
+    guard let image = CIImage(mtlTexture: texture, options: [.colorSpace: CGColorSpaceCreateDeviceRGB()]) else { return nil }
+    
+    return image.transformed(by: CGAffineTransform(translationX: extent.origin.x, y: extent.origin.y))
+  }
+  
+  private static func applyMPSBlur(
+    to sourceTexture: MTLTexture,
+    sigma: Float,
+    device: MTLDevice,
+    commandQueue: MTLCommandQueue
+  ) -> MTLTexture? {
+    let descriptor = MTLTextureDescriptor.texture2DDescriptor(
+      pixelFormat: sourceTexture.pixelFormat,
+      width: sourceTexture.width,
+      height: sourceTexture.height,
+      mipmapped: false
+    )
+    descriptor.usage = [.shaderRead, .shaderWrite]
+    descriptor.storageMode = .shared
+    
+    guard let outputTexture = device.makeTexture(descriptor: descriptor) else { return nil }
+    
+    let blur = MPSImageGaussianBlur(device: device, sigma: sigma)
+    blur.edgeMode = .clamp
+    
+    guard let commandBuffer = commandQueue.makeCommandBuffer() else { return nil }
+    blur.encode(commandBuffer: commandBuffer, sourceTexture: sourceTexture, destinationTexture: outputTexture)
+    commandBuffer.commit()
+    commandBuffer.waitUntilCompleted()
+    
+    return outputTexture
+  }
+  
+  private static func createCIImageFromLayerContents(view: UIView, scale: CGFloat, excludeLayer: CALayer?) -> CIImage? {
+    // Only use fast path if:
+    // 1. Layer has direct contents (CGImage)
+    // 2. No sublayers (except our filter layer)
+    // 3. No transforms on the view
+    // 4. No corner radius or other layer effects
+    let sublayersExcludingFilter = view.layer.sublayers?.filter { $0 !== excludeLayer }
+    guard let contents = view.layer.contents,
+          sublayersExcludingFilter == nil || sublayersExcludingFilter?.isEmpty == true,
+          view.transform.isIdentity,
+          view.layer.cornerRadius == 0,
+          view.layer.borderWidth == 0,
+          CFGetTypeID(contents as CFTypeRef) == CGImage.typeID else {
+      return nil
+    }
+    
+    let cgImage = contents as! CGImage
+    let imageWidth = CGFloat(cgImage.width)
+    let imageHeight = CGFloat(cgImage.height)
+    
+    let targetWidth = view.bounds.width * scale
+    let targetHeight = view.bounds.height * scale
+    
+    guard imageWidth > 0 && imageHeight > 0 && targetWidth > 0 && targetHeight > 0 else { return nil }
+    
+    var ciImage = CIImage(cgImage: cgImage)
+    
+    let contentMode = view.contentMode
+    
+    let imageAspect = imageWidth / imageHeight
+    let targetAspect = targetWidth / targetHeight
+    
+    var scaleX: CGFloat = 1
+    var scaleY: CGFloat = 1
+    var offsetX: CGFloat = 0
+    var offsetY: CGFloat = 0
+    
+    switch contentMode {
+    case .scaleToFill:
+      scaleX = targetWidth / imageWidth
+      scaleY = targetHeight / imageHeight
+      
+    case .scaleAspectFit:
+      let fitScale: CGFloat
+      if imageAspect > targetAspect {
+        fitScale = targetWidth / imageWidth
+      } else {
+        fitScale = targetHeight / imageHeight
+      }
+      scaleX = fitScale
+      scaleY = fitScale
+      let scaledWidth = imageWidth * fitScale
+      let scaledHeight = imageHeight * fitScale
+      offsetX = (targetWidth - scaledWidth) / 2
+      offsetY = (targetHeight - scaledHeight) / 2
+      
+    case .scaleAspectFill:
+      let fillScale: CGFloat
+      if imageAspect > targetAspect {
+        fillScale = targetHeight / imageHeight
+      } else {
+        fillScale = targetWidth / imageWidth
+      }
+      scaleX = fillScale
+      scaleY = fillScale
+      let scaledWidth = imageWidth * fillScale
+      let scaledHeight = imageHeight * fillScale
+      offsetX = (targetWidth - scaledWidth) / 2
+      offsetY = (targetHeight - scaledHeight) / 2
+      
+    case .center:
+      offsetX = (targetWidth - imageWidth) / 2
+      offsetY = (targetHeight - imageHeight) / 2
+      
+    case .top:
+      offsetX = (targetWidth - imageWidth) / 2
+      offsetY = targetHeight - imageHeight
+      
+    case .bottom:
+      offsetX = (targetWidth - imageWidth) / 2
+      offsetY = 0
+      
+    case .left:
+      offsetX = 0
+      offsetY = (targetHeight - imageHeight) / 2
+      
+    case .right:
+      offsetX = targetWidth - imageWidth
+      offsetY = (targetHeight - imageHeight) / 2
+      
+    case .topLeft:
+      offsetX = 0
+      offsetY = targetHeight - imageHeight
+      
+    case .topRight:
+      offsetX = targetWidth - imageWidth
+      offsetY = targetHeight - imageHeight
+      
+    case .bottomLeft:
+      offsetX = 0
+      offsetY = 0
+      
+    case .bottomRight:
+      offsetX = targetWidth - imageWidth
+      offsetY = 0
+      
+    case .redraw:
+      return nil
+      
+    @unknown default:
+      return nil
+    }
+    
+    var transform = CGAffineTransform.identity
+    transform = transform.scaledBy(x: scaleX, y: scaleY)
+    transform = transform.translatedBy(x: offsetX / scaleX, y: offsetY / scaleY)
+    
+    ciImage = ciImage.transformed(by: transform)
+    
+    let targetRect = CGRect(x: 0, y: 0, width: targetWidth, height: targetHeight)
+    ciImage = ciImage.cropped(to: targetRect)
+    
+    return ciImage
+  }
+  
+  private static func captureViewToCIImage(view: UIView, scale: CGFloat, excludeLayer: CALayer?, device: MTLDevice, commandQueue: MTLCommandQueue) -> CIImage? {
+    guard view.bounds.width > 0 && view.bounds.height > 0 else { return nil }
+    
+    if let fastImage = createCIImageFromLayerContents(view: view, scale: scale, excludeLayer: excludeLayer) {
+      return fastImage
+    }
+    
+    let wasHidden = excludeLayer?.isHidden ?? true
+    excludeLayer?.isHidden = true
+    
+    view.layoutIfNeeded()
+    
+    let fmt = UIGraphicsImageRendererFormat()
+    fmt.scale = scale
+    fmt.opaque = false
+    let renderer = UIGraphicsImageRenderer(bounds: view.bounds, format: fmt)
+    let image = renderer.image { ctx in
+      view.layer.render(in: ctx.cgContext)
+    }
+    
+    excludeLayer?.isHidden = wasHidden
+    
+    if let cg = image.cgImage {
+      return CIImage(cgImage: cg)
+    }
+    return CIImage(image: image)
+  }
+  
+  @objcMembers
+  @objc(NSCCSSFilter)
+  public class CSSFilter: NSObject {
+    let layer = CAMetalLayer()
+    var filters: [Filter]
+    private var ciFilters: [CIFilter] = []
+    private weak var view: UIView?
+    private var colorSpace = CGColorSpaceCreateDeviceRGB()
+    
+    public override init() {
+      filters = []
+      layer.isOpaque = false
+      layer.masksToBounds = false
+      layer.pixelFormat = .bgra8Unorm
+      layer.framebufferOnly = false
+      super.init()
+    }
+    
+    init(default filters: [Filter] = []) {
+      self.filters = filters
+      layer.isOpaque = false
+      layer.masksToBounds = false
+      layer.pixelFormat = .bgra8Unorm
+      layer.framebufferOnly = false
+    }
+    
+    public func reset() {
+      filters = []
+      layer.removeFromSuperlayer()
+      boundsObservation = nil
+      contentsObservation = nil
+      sublayersObservation = nil
+      sublayerContentObservations.removeAll()
+      view = nil
+    }
+    
+    public func parse(css: String) {
+      let isEmpty = filters.count == 0
+      filters = CSSFilters.parse(css)
+      if(!isEmpty && filters.count == 0){
+        reset()
+      }
+    }
+    
+    func resizeLayerIfNeeded() {
+      guard let view = view else { return }
+      let scale = view.window?.screen.scale ?? UIScreen.main.scale
+      
+      var padLeft: CGFloat = 0, padRight: CGFloat = 0
+      var padTop: CGFloat = 0, padBottom: CGFloat = 0
+      
+      for filter in filters {
+        if case .dropShadow(let offsetX, let offsetY, let blur, _) = filter {
+          let spread = blur * 3
+          padLeft = max(padLeft, spread - offsetX)
+          padRight = max(padRight, spread + offsetX)
+          padTop = max(padTop, spread - offsetY)
+          padBottom = max(padBottom, spread + offsetY)
+        }
+      }
+      
+      padLeft = max(0, padLeft)
+      padRight = max(0, padRight)
+      padTop = max(0, padTop)
+      padBottom = max(0, padBottom)
+      
+      let hasShadowOverflow = padLeft > 0 || padRight > 0 || padTop > 0 || padBottom > 0
+      
+      let targetFrame: CGRect
+      if hasShadowOverflow {
+        targetFrame = CGRect(
+          x: -padLeft,
+          y: -padTop,
+          width: view.bounds.width + padLeft + padRight,
+          height: view.bounds.height + padTop + padBottom
+        )
+        view.clipsToBounds = false
+      } else {
+        targetFrame = view.bounds
+      }
+      
+      let pixelSize = CGSize(width: targetFrame.width * scale, height: targetFrame.height * scale)
+      if layer.frame != targetFrame || layer.drawableSize != pixelSize || layer.contentsScale != scale {
+        layer.frame = targetFrame
+        layer.contentsScale = scale
+        layer.drawableSize = pixelSize
+      }
+    }
+    
+    private var pendingInvalidate = false
+    
+    public func invalidate() {
+      guard view != nil else { return }
+      
+      guard !pendingInvalidate else { return }
+      pendingInvalidate = true
+      
+      // Defer to next run loop to ensure sublayers have finished rendering
+      DispatchQueue.main.async { [weak self] in
+        guard let self = self else { return }
+        self.pendingInvalidate = false
+        guard let view = self.view else { return }
+        self.apply(to: view)
+      }
+    }
+    
+    private var boundsObservation: NSKeyValueObservation?
+    private var contentsObservation: NSKeyValueObservation?
+    private var sublayersObservation: NSKeyValueObservation?
+    private var sublayerContentObservations: [NSKeyValueObservation] = []
+    private var isApplying = false
+ 
+    private func observeSublayerContents(layer: CALayer) {
+      guard let sublayers = layer.sublayers else { return }
+      for sublayer in sublayers {
+        if sublayer === self.layer { continue }
+      
+        let observation = sublayer.observe(\.contents, options: [.new]) { [weak self] _, _ in
+          guard let self = self, !self.isApplying else { return }
+          self.invalidate()
+        }
+        sublayerContentObservations.append(observation)
+        
+        observeSublayerContents(layer: sublayer)
+      }
+    }
+    
+    private func setupSublayerObservation(for view: UIView) {
+      sublayerContentObservations.removeAll()
+
+      sublayersObservation = view.layer.observe(\.sublayers, options: [.new]) { [weak self] layer, _ in
+        guard let self = self, !self.isApplying else { return }
+        self.sublayerContentObservations.removeAll()
+        self.observeSublayerContents(layer: layer)
+        self.invalidate()
+      }
+      
+      observeSublayerContents(layer: view.layer)
+    }
+    
+    public func apply(to view: UIView) {
+      isApplying = true
+      defer { isApplying = false }
+      
+      if(device == nil){
+        device = MTLCreateSystemDefaultDevice()
+        guard let device = device else {return}
+        commandQueue = device.makeCommandQueue()
+        ciContext = CIContext(mtlDevice: device)
+      }
+      if(self.view != view){
+        layer.device = device
+        boundsObservation = view.observe(\.bounds) { [weak self] _, _ in
+          guard let self = self, !self.isApplying else { return }
+          self.invalidate()
+        }
+        contentsObservation = view.layer.observe(\.contents) { [weak self] _, _ in
+          guard let self = self, !self.isApplying else { return }
+          self.invalidate()
+        }
+        setupSublayerObservation(for: view)
+        self.view = view
+      }
+      let scale = view.window?.screen.scale ?? UIScreen.main.scale
+      
+      var hasVisualFilters = false
+      for filter in filters {
+        switch filter {
+        case .opacity(_): break
+        default: hasVisualFilters = true
+        }
+      }
+      
+      if !hasVisualFilters {
+        layer.removeFromSuperlayer()
+      }
+      
+      guard hasVisualFilters else { return }
+      
+      if view.layer.sublayers?.last != layer {
+        view.layer.addSublayer(layer)
+      }
+      
+      resizeLayerIfNeeded()
+      
+      guard let drawable = layer.nextDrawable() else { return }
+      
+      guard let device = device, let queue = commandQueue else { return }
+      guard var output = CSSFilters.captureViewToCIImage(view: view, scale: scale, excludeLayer: layer, device: device, commandQueue: queue) else { return }
+  
+      var padLeftPx: CGFloat = 0, padBottomPx: CGFloat = 0
+      for filter in filters {
+        if case .dropShadow(let offsetX, let offsetY, let blur, _) = filter {
+          let spread = blur * 3
+          padLeftPx = max(padLeftPx, max(0, spread - offsetX) * scale)
+          padBottomPx = max(padBottomPx, max(0, spread + offsetY) * scale)
+        }
+      }
+      
+      if padLeftPx > 0 || padBottomPx > 0 {
+        output = output.transformed(by: .init(translationX: padLeftPx, y: padBottomPx))
+      }
+      
+      let contentExtent = output.extent
+      
+      for filter in filters {
+        switch filter {
+          
+        case .dropShadow(let offsetX, let offsetY, let blur, let color):
+          guard let colorGen = CIFilter(name: "CIConstantColorGenerator") else { continue }
+          var cr: CGFloat = 0, cg: CGFloat = 0, cb: CGFloat = 0, ca: CGFloat = 0
+          color.getRed(&cr, green: &cg, blue: &cb, alpha: &ca)
+          colorGen.setValue(CIColor(red: cr, green: cg, blue: cb, alpha: ca), forKey: kCIInputColorKey)
+          guard let colorImage = colorGen.outputImage?.cropped(to: contentExtent) else { continue }
+          
+          guard let sourceAtop = CIFilter(name: "CISourceAtopCompositing") else { continue }
+          sourceAtop.setValue(colorImage, forKey: kCIInputImageKey)
+          sourceAtop.setValue(output, forKey: kCIInputBackgroundImageKey)
+          guard var shadow = sourceAtop.outputImage else { continue }
+          
+          let blurPx = blur * scale
+          if blurPx > 0.0001 {
+            let blurPadPx = blurPx * 3
+            let blurCropExtent = contentExtent.insetBy(dx: -blurPadPx, dy: -blurPadPx)
+            
+            if let context = ciContext,
+               let sourceTexture = CSSFilters.createTexture(from: shadow, context: context, device: device, commandQueue: queue),
+               let blurredTexture = CSSFilters.applyMPSBlur(to: sourceTexture, sigma: Float(blurPx), device: device, commandQueue: queue),
+               let blurredCI = CSSFilters.createCIImage(from: blurredTexture, extent: shadow.extent) {
+              shadow = blurredCI.cropped(to: blurCropExtent)
+            } else {
+              let blurFilter = CIFilter.gaussianBlur()
+              blurFilter.radius = Float(blurPx)
+              if let clamp = CIFilter(name: "CIAffineClamp") {
+                clamp.setValue(shadow, forKey: kCIInputImageKey)
+                clamp.setValue(CGAffineTransform.identity, forKey: "inputTransform")
+                if let clamped = clamp.outputImage {
+                  blurFilter.inputImage = clamped
+                  if let blurred = blurFilter.outputImage {
+                    shadow = blurred.cropped(to: blurCropExtent)
+                  }
+                }
+              } else {
+                blurFilter.inputImage = shadow
+                if let blurred = blurFilter.outputImage {
+                  shadow = blurred.cropped(to: blurCropExtent)
+                }
+              }
+            }
+          }
+          
+          shadow = shadow.transformed(by: CGAffineTransform(
+            translationX: offsetX * scale,
+            y: -offsetY * scale
+          ))
+          
+          guard let composite = CIFilter(name: "CISourceOverCompositing") else { continue }
+          composite.setValue(output, forKey: kCIInputImageKey)
+          composite.setValue(shadow, forKey: kCIInputBackgroundImageKey)
+          if let filtered = composite.outputImage {
+            output = filtered
+          }
+          
+        case .blur(let radius):
+          let blurPx = Float(radius * scale)
+          guard blurPx > 0 else { continue }
+          let cropExtent = output.extent
+          
+          let blurFilter = CIFilter.gaussianBlur()
+          blurFilter.radius = blurPx
+          if let clamp = CIFilter(name: "CIAffineClamp") {
+            clamp.setValue(output, forKey: kCIInputImageKey)
+            clamp.setValue(CGAffineTransform.identity, forKey: "inputTransform")
+            if let clamped = clamp.outputImage {
+              blurFilter.inputImage = clamped
+              if let result = blurFilter.outputImage {
+                output = result.cropped(to: cropExtent)
+              }
+              continue
+            }
+          }
+          blurFilter.inputImage = output
+          if let result = blurFilter.outputImage {
+            output = result.cropped(to: cropExtent)
+          }
+          
+        case .brightness(let value):
+          let f = CIFilter.colorControls()
+          f.brightness = Float(value - 1)
+          f.setValue(output, forKey: kCIInputImageKey)
+          if let result = f.outputImage { output = result }
+          
+        case .contrast(let value):
+          let f = CIFilter.colorControls()
+          f.contrast = Float(value)
+          f.setValue(output, forKey: kCIInputImageKey)
+          if let result = f.outputImage { output = result }
+          
+        case .saturate(let value):
+          let f = CIFilter.colorControls()
+          f.saturation = Float(value)
+          f.setValue(output, forKey: kCIInputImageKey)
+          if let result = f.outputImage { output = result }
+          
+        case .hueRotate(let degrees):
+          let f = CIFilter.hueAdjust()
+          f.angle = Float(degrees * .pi / 180)
+          f.setValue(output, forKey: kCIInputImageKey)
+          if let result = f.outputImage { output = result }
+          
+        case .invert(let amount):
+          let t = CGFloat(1 - 2 * amount)
+          let o = CGFloat(amount)
+          let f = CIFilter.colorMatrix()
+          f.rVector = CIVector(x: t, y: 0, z: 0, w: 0)
+          f.gVector = CIVector(x: 0, y: t, z: 0, w: 0)
+          f.bVector = CIVector(x: 0, y: 0, z: t, w: 0)
+          f.aVector = CIVector(x: 0, y: 0, z: 0, w: 1)
+          f.biasVector = CIVector(x: o, y: o, z: o, w: 0)
+          let cropExtent = output.extent
+          if let clamp = CIFilter(name: "CIAffineClamp") {
+            clamp.setValue(output, forKey: kCIInputImageKey)
+            clamp.setValue(CGAffineTransform.identity, forKey: "inputTransform")
+            if let clamped = clamp.outputImage {
+              f.setValue(clamped, forKey: kCIInputImageKey)
+              if let result = f.outputImage {
+                output = result.cropped(to: cropExtent)
+              }
+              continue
+            }
+          }
+          f.setValue(output, forKey: kCIInputImageKey)
+          if let result = f.outputImage { output = result }
+          
+        case .opacity(let amount):
+          view.alpha = amount
+          
+        case .sepia(let amount):
+          let f = CIFilter.sepiaTone()
+          f.intensity = Float(amount)
+          f.setValue(output, forKey: kCIInputImageKey)
+          if let result = f.outputImage { output = result }
+          
+        case .grayscale(let amount):
+          let f = CIFilter.colorControls()
+          f.saturation = Float(1 - amount)
+          f.setValue(output, forKey: kCIInputImageKey)
+          if let result = f.outputImage { output = result }
+        }
+      }
+      
+      let drawableBounds = CGRect(
+        origin: .zero,
+        size: CGSize(width: CGFloat(drawable.texture.width), height: CGFloat(drawable.texture.height))
+      )
+      output = output.cropped(to: drawableBounds)
+      
+      guard output.extent.width > 0 && output.extent.height > 0 else { return }
+      
+      let cb = commandQueue?.makeCommandBuffer()
+      ciContext?.render(output,
+                        to: drawable.texture,
+                        commandBuffer: cb,
+                        bounds: drawableBounds,
+                        colorSpace: colorSpace)
+      if let cb = cb {
+        cb.present(drawable)
+        cb.commit()
+      } else {
+        drawable.present()
+      }
+    }
+  }
+  
+  private static func splitCssArgs(_ input: String) -> [String] {
+    var result: [String] = []
+    var current = ""
+    var depth = 0
+    
+    for ch in input {
+      if ch == "(" { depth += 1 }
+      if ch == ")" { depth -= 1 }
+      
+      if ch.isWhitespace && depth == 0 {
+        if !current.isEmpty {
+          result.append(current)
+          current = ""
+        }
+      } else {
+        current.append(ch)
+      }
+    }
+    
+    if !current.isEmpty {
+      result.append(current)
+    }
+    
+    return result
+  }
+  
+  
+  
+  static func parse(_ value: String) -> [Filter] {
+    var filters: [Filter] = []
+    var i = value.startIndex
+    
+    func skipSpaces() {
+      while i < value.endIndex && value[i].isWhitespace {
+        i = value.index(after: i)
+      }
+    }
+    
+    while i < value.endIndex {
+      skipSpaces()
+      
+      let nameStart = i
+      while i < value.endIndex && (value[i].isLetter || value[i] == "-") {
+        i = value.index(after: i)
+      }
+      
+      guard nameStart < i else { break }
+      let name = value[nameStart..<i].lowercased()
+      
+      skipSpaces()
+      guard i < value.endIndex, value[i] == "(" else { break }
+      i = value.index(after: i)
+      
+      var depth = 1
+      let argsStart = i
+      
+      while i < value.endIndex && depth > 0 {
+        if value[i] == "(" { depth += 1 }
+        if value[i] == ")" { depth -= 1 }
+        i = value.index(after: i)
+      }
+      
+      let args = value[argsStart..<value.index(before: i)]
+        .trimmingCharacters(in: .whitespacesAndNewlines)
+      
+      switch name {
+      case "blur":
+        filters.append(.blur(radius: parseCssFloat(String(args))))
+      case "brightness":
+        filters.append(.brightness(value: parseCssFloat(String(args), defaultValue: 1)))
+      case "contrast":
+        filters.append(.contrast(value: parseCssFloat(String(args), defaultValue: 1)))
+      case "saturate":
+        filters.append(.saturate(value: parseCssFloat(String(args), defaultValue: 1)))
+      case "hue-rotate":
+        filters.append(.hueRotate(degrees: parseCssAngle(String(args))))
+      case "invert":
+        filters.append(.invert(amount: parseCssFloat(String(args), defaultValue: 0)))
+      case "opacity":
+        filters.append(.opacity(amount: parseCssFloat(String(args), defaultValue: 1)))
+      case "sepia":
+        filters.append(.sepia(amount: parseCssFloat(String(args), defaultValue: 0)))
+      case "grayscale":
+        filters.append(.grayscale(amount: parseCssFloat(String(args), defaultValue: 0)))
+      case "drop-shadow":
+        if let shadow = parseDropShadow(String(args)) {
+          filters.append(shadow)
+        }
+      default:
+        break
+      }
+    }
+    
+    return filters
+  }
+  
+  
+  
+  // Parse a CSS float value like "5px" or "50%"
+  private static func parseCssFloat(_ value: String, defaultValue: CGFloat = 0) -> CGFloat {
+    let trimmed = value.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+    if trimmed.hasSuffix("px") {
+      let px = CGFloat(Double(trimmed.dropLast(2)) ?? Double(defaultValue))
+      return px / CGFloat(UIScreen.main.scale)
+    } else if trimmed.hasSuffix("%") {
+      return CGFloat((Double(trimmed.dropLast()) ?? Double(defaultValue)) / 100.0)
+    } else {
+      return CGFloat(Double(trimmed) ?? Double(defaultValue))
+    }
+  }
+  
+  // Parse CSS angle: "30deg", "0.5turn", "1.57rad"
+  private static func parseCssAngle(_ value: String) -> CGFloat {
+    let trimmed = value.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+    if trimmed.hasSuffix("deg") {
+      return CGFloat(Double(trimmed.dropLast(3)) ?? 0)
+    } else if trimmed.hasSuffix("grad") {
+      return CGFloat(Double(trimmed.dropLast(4)) ?? 0) * 0.9
+    } else if trimmed.hasSuffix("rad") {
+      return CGFloat(Double(trimmed.dropLast(3)) ?? 0) * 180 / .pi
+    } else if trimmed.hasSuffix("turn") {
+      return CGFloat(Double(trimmed.dropLast(4)) ?? 0) * 360
+    } else {
+      return CGFloat(Double(trimmed) ?? 0)
+    }
+  }
+  
+  // Parse drop-shadow: "5px 5px 10px #000"
+  private static func parseDropShadow(_ value: String) -> Filter? {
+    let parts = splitCssArgs(value.trimmingCharacters(in: .whitespacesAndNewlines))
+    guard parts.count >= 2 else { return nil }
+    
+    var offsetX: CGFloat = 0
+    var offsetY: CGFloat = 0
+    var blur: CGFloat = 0
+    var color: UIColor = .black
+    
+    var lengthValues: [CGFloat] = []
+    var colorParts: [String] = []
+    
+    for part in parts {
+      let trimmed = part.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+      
+      if trimmed.hasPrefix("#")
+          || trimmed.hasPrefix("rgb(")
+          || trimmed.hasPrefix("rgba(")
+          || colorMap[trimmed] != nil {
+        colorParts.append(part)
+      } else {
+        lengthValues.append(parseCssFloat(part))
+      }
+    }
+    
+    guard lengthValues.count >= 2 else { return nil }
+    
+    offsetX = lengthValues[0]
+    offsetY = lengthValues[1]
+    blur = lengthValues.count >= 3 ? max(0, lengthValues[2]) : 0   // CSS clamps blur to >= 0
+    
+    if !colorParts.isEmpty {
+      let colorString = colorParts.joined(separator: " ")
+      color = parseCssColor(colorString)
+    }
+    
+    return .dropShadow(offsetX: offsetX, offsetY: offsetY, blur: blur, color: color)
+  }
+  
+  // MARK: - Helpers
+  
+  static func parseCssColor(_ value: String) -> UIColor {
+    let trimmed = value.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+    if let color = colorMap[value] {
+      return color
+    }
+    if trimmed.hasPrefix("#") {
+      let hex = String(trimmed.dropFirst())
+      switch hex.count {
+      case 3:
+        let r = CGFloat(Int(String(repeating: hex[hex.startIndex], count: 2), radix: 16)!) / 255
+        let g = CGFloat(Int(String(repeating: hex[hex.index(hex.startIndex, offsetBy: 1)], count: 2), radix: 16)!) / 255
+        let b = CGFloat(Int(String(repeating: hex[hex.index(hex.startIndex, offsetBy: 2)], count: 2), radix: 16)!) / 255
+        return UIColor(red: r, green: g, blue: b, alpha: 1)
+      case 6:
+        let intVal = Int(hex, radix: 16)!
+        let r = CGFloat((intVal >> 16) & 0xFF)/255
+        let g = CGFloat((intVal >> 8) & 0xFF)/255
+        let b = CGFloat(intVal & 0xFF)/255
+        return UIColor(red: r, green: g, blue: b, alpha: 1)
+      case 8:
+        let intVal = Int(hex, radix: 16)!
+        let a = CGFloat((intVal >> 24) & 0xFF)/255
+        let r = CGFloat((intVal >> 16) & 0xFF)/255
+        let g = CGFloat((intVal >> 8) & 0xFF)/255
+        let b = CGFloat(intVal & 0xFF)/255
+        return UIColor(red: r, green: g, blue: b, alpha: a)
+      default:
+        return .black
+      }
+    } else if trimmed.hasPrefix("rgb(") {
+      let nums = trimmed.dropFirst(4).dropLast().split(separator: ",").map { CGFloat(Double($0.trimmingCharacters(in: .whitespaces)) ?? 0) }
+      return UIColor(red: nums[0]/255, green: nums[1]/255, blue: nums[2]/255, alpha: 1)
+    } else if trimmed.hasPrefix("rgba(") {
+      let nums = trimmed.dropFirst(5).dropLast().split(separator: ",").map { $0.trimmingCharacters(in: .whitespaces) }
+      let r = CGFloat(Double(nums[0]) ?? 0)/255
+      let g = CGFloat(Double(nums[1]) ?? 0)/255
+      let b = CGFloat(Double(nums[2]) ?? 0)/255
+      let a = CGFloat(Double(nums[3]) ?? 1)
+      return UIColor(red: r, green: g, blue: b, alpha: a)
+    }
+    return .black
+  }
+  
+}
diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts
index 2b2938a136..c72ba44a60 100644
--- a/packages/core/ui/core/view/index.android.ts
+++ b/packages/core/ui/core/view/index.android.ts
@@ -2,7 +2,7 @@ import type { Point, Position } from './view-interfaces';
 import type { GestureTypes, GestureEventData } from '../../gestures';
 import { getNativeScriptGlobals } from '../../../globals/global-utils';
 import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUserInteractionEnabledProperty, testIDProperty, AndroidHelper, androidOverflowEdgeProperty, statusBarStyleProperty } from './view-common';
-import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, directionProperty } from '../../styling/style-properties';
+import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, directionProperty, filterProperty } from '../../styling/style-properties';
 import { layout } from '../../../utils';
 import { Trace } from '../../../trace';
 import { ShowModalOptions, hiddenProperty } from '../view-base';
@@ -1605,6 +1605,18 @@ export class View extends ViewCommon {
 		}
 	}
 
+	[filterProperty.getDefault](): string {
+		return '';
+	}
+	[filterProperty.setNative](value: string) {
+		const nativeView = this.nativeViewProtected;
+		//@ts-ignore
+		if ('setFilter' in nativeView) {
+			// @ts-ignore
+			nativeView.setFilter(value);
+		}
+	}
+
 	public _applyBackground(background: Background, isBorderDrawable: boolean, onlyColor: boolean, backgroundDrawable: android.graphics.drawable.Drawable) {
 		const nativeView = <NativeScriptAndroidView>this.nativeViewProtected;
 
diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts
index 4ca8c538de..ba4d63873d 100644
--- a/packages/core/ui/core/view/index.ios.ts
+++ b/packages/core/ui/core/view/index.ios.ts
@@ -8,7 +8,7 @@ import { layout, ios as iosUtils, getWindow } from '../../../utils';
 import { SDK_VERSION, supportsGlass } from '../../../utils/constants';
 import { IOSHelper } from './view-helper';
 import { ios as iosBackground, Background } from '../../styling/background';
-import { perspectiveProperty, visibilityProperty, opacityProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, directionProperty } from '../../styling/style-properties';
+import { perspectiveProperty, visibilityProperty, opacityProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, directionProperty, filterProperty } from '../../styling/style-properties';
 import { profile } from '../../../profiling';
 import { accessibilityEnabledProperty, accessibilityHiddenProperty, accessibilityHintProperty, accessibilityIdentifierProperty, accessibilityLabelProperty, accessibilityLanguageProperty, accessibilityLiveRegionProperty, accessibilityMediaSessionProperty, accessibilityRoleProperty, accessibilityStateProperty, accessibilityValueProperty, accessibilityIgnoresInvertColorsProperty } from '../../../accessibility/accessibility-properties';
 import { IOSPostAccessibilityNotificationType, AccessibilityEventOptions, AccessibilityRole, AccessibilityState } from '../../../accessibility';
@@ -71,6 +71,19 @@ export class View extends ViewCommon {
 		return (this._privateFlags & PFLAG_FORCE_LAYOUT) === PFLAG_FORCE_LAYOUT;
 	}
 
+	private _filter: NSCCSSFilter;
+
+	[filterProperty.setNative](value: string) {
+		if (!this._filter) {
+			this._filter = NSCCSSFilter.alloc().init();
+		}
+		this._filter.parseWithCss(value);
+
+		if (this.nativeViewProtected) {
+			this._filter.applyTo(this.nativeViewProtected);
+		}
+	}
+
 	disposeNativeView() {
 		super.disposeNativeView();
 
diff --git a/packages/core/ui/styling/style-properties.ts b/packages/core/ui/styling/style-properties.ts
index bb65f7f602..113dd79c85 100644
--- a/packages/core/ui/styling/style-properties.ts
+++ b/packages/core/ui/styling/style-properties.ts
@@ -1250,3 +1250,9 @@ export const androidDynamicElevationOffsetProperty = new CssProperty<Style, numb
 	valueConverter: parseFloat,
 });
 androidDynamicElevationOffsetProperty.register(Style);
+
+export const filterProperty = new CssProperty<Style, string>({
+	name: 'filter',
+	cssName: 'filter',
+});
+filterProperty.register(Style);
diff --git a/packages/core/ui/styling/style/index.ts b/packages/core/ui/styling/style/index.ts
index 2b9ae8b3d0..30328e1d3b 100644
--- a/packages/core/ui/styling/style/index.ts
+++ b/packages/core/ui/styling/style/index.ts
@@ -154,7 +154,7 @@ export class Style extends Observable {
 	public boxShadow: string | ShadowCSSValues[];
 
 	public direction: CoreTypes.LayoutDirectionType;
-
+	public filter: string;
 	public fontSize: number;
 	public fontFamily: string;
 	public fontStyle: FontStyleType;
diff --git a/packages/core/ui/text-base/index.android.ts b/packages/core/ui/text-base/index.android.ts
index cb018133c3..2f11ca9c7d 100644
--- a/packages/core/ui/text-base/index.android.ts
+++ b/packages/core/ui/text-base/index.android.ts
@@ -330,7 +330,7 @@ export class TextBase extends TextBaseCommon {
 				break;
 			case 'center':
 				if (supportsRtlTextAlign) {
-					this.nativeTextViewProtected.setTextAlignment(android.view.View.TEXT_ALIGNMENT_CENTER);
+					//	this.nativeTextViewProtected.setTextAlignment(android.view.View.TEXT_ALIGNMENT_CENTER);
 				}
 				this.nativeTextViewProtected.setGravity(android.view.Gravity.CENTER_HORIZONTAL | verticalGravity);
 				break;
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!nsswiftsupport.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!nsswiftsupport.d.ts
index 955eeb2529..921461cbaa 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!nsswiftsupport.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!nsswiftsupport.d.ts
@@ -42,3 +42,22 @@ declare class NativeScriptViewFactory extends NSObject implements NativeScriptEm
 
 	presentNativeScriptApp(vc: UIViewController): any;
 }
+
+declare class NSCCSSFilter extends NSObject {
+
+	static alloc(): NSCCSSFilter; // inherited from NSObject
+
+	static new(): NSCCSSFilter; // inherited from NSObject
+
+	readonly layer: CAMetalLayer;
+
+	applyTo(view: UIView): void;
+
+	parseWithCss(css: string): void;
+
+	reset(): void;
+
+	resizeLayerIfNeeded(): void;
+
+	invalidate(): void;
+}
\ No newline at end of file
diff --git a/packages/ui-mobile-base/android/build.gradle b/packages/ui-mobile-base/android/build.gradle
index 6051f05dfc..0b80384bfc 100644
--- a/packages/ui-mobile-base/android/build.gradle
+++ b/packages/ui-mobile-base/android/build.gradle
@@ -7,7 +7,7 @@ buildscript {
     }
     dependencies {
         classpath 'com.android.tools.build:gradle:8.11.1'
-        classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:2.0.21'
+        classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:2.2.0'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
diff --git a/packages/ui-mobile-base/android/widgetdemo/src/main/AndroidManifest.xml b/packages/ui-mobile-base/android/widgetdemo/src/main/AndroidManifest.xml
index fd9c3be6e8..0606dc29d1 100644
--- a/packages/ui-mobile-base/android/widgetdemo/src/main/AndroidManifest.xml
+++ b/packages/ui-mobile-base/android/widgetdemo/src/main/AndroidManifest.xml
@@ -1,7 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <application
+	<uses-permission android:name="android.permission.INTERNET" />
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+
+	<application
         android:allowBackup="true"
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
diff --git a/packages/ui-mobile-base/android/widgetdemo/src/main/java/org/nativescript/widgetsdemo/MainActivity.kt b/packages/ui-mobile-base/android/widgetdemo/src/main/java/org/nativescript/widgetsdemo/MainActivity.kt
index aa4c6ea0b1..365e7b41ef 100644
--- a/packages/ui-mobile-base/android/widgetdemo/src/main/java/org/nativescript/widgetsdemo/MainActivity.kt
+++ b/packages/ui-mobile-base/android/widgetdemo/src/main/java/org/nativescript/widgetsdemo/MainActivity.kt
@@ -1,10 +1,14 @@
 package org.nativescript.widgetsdemo
 
+import android.animation.ValueAnimator
 import android.app.Dialog
+import android.content.res.Resources
 import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
 import android.os.Bundle
 import android.util.Log
 import android.util.TypedValue
+import android.view.Gravity
 import android.view.ViewGroup
 import android.widget.Button
 import android.widget.EditText
@@ -19,8 +23,10 @@ import org.nativescript.widgets.CommonLayoutParams
 import org.nativescript.widgets.ContentLayout
 import org.nativescript.widgets.GridLayout
 import org.nativescript.widgets.GridUnitType
+import org.nativescript.widgets.ImageView
 import org.nativescript.widgets.LayoutBase
 import org.nativescript.widgets.StackLayout
+import org.nativescript.widgets.StyleableTextView
 import org.nativescript.widgets.Utils
 
 class MainActivity : AppCompatActivity() {
@@ -255,7 +261,7 @@ class MainActivity : AppCompatActivity() {
 				val (name, mode) = modes[modeIndex]
 				page.overflowEdge = mode
 				statusLabel.text = "Mode: $name"
-				page.postDelayed(100) {
+				page.postDelayed(100L) {
 					paddingLabel.text = "paddingBottom: ${page.paddingBottom}  (edge=${page.edgeInsets.bottom}, ime=${page.imeInsets.bottom})"
 					Log.d(TAG, "Cycle -> $name: paddingBottom=${page.paddingBottom}, edge=${page.edgeInsets.bottom}, ime=${page.imeInsets.bottom}")
 				}
@@ -287,6 +293,13 @@ class MainActivity : AppCompatActivity() {
 
 		Utils.enableEdgeToEdge(this)
 		val frame = ContentLayout(this)
+		//ete(frame)
+		frame.layoutParams = CommonLayoutParams(
+			ViewGroup.LayoutParams(
+				ViewGroup.LayoutParams.MATCH_PARENT,
+				ViewGroup.LayoutParams.MATCH_PARENT
+			)
+		)
 
 		frame.overflowEdge = LayoutBase.OverflowEdgeIgnore
 
@@ -391,4 +404,132 @@ class MainActivity : AppCompatActivity() {
 		frame.addView(page)
 		setContentView(frame)
 	}
+
+	fun growShadow(view: LayoutBase, onComplete: (() -> Unit)? = null) {
+		// Grow shadow: offset and blur increase
+		val growAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
+			duration = 800
+			addUpdateListener { animation ->
+				val p = animation.animatedValue as Float
+				val offset = p * 15
+				val blur = p * 20
+				view.filter = "drop-shadow($offset $offset $blur rgba(0,0,0,0.6))"
+			}
+		}
+
+		// Shrink shadow back
+		val shrinkAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
+			duration = 800
+			addUpdateListener { animation ->
+				val p = animation.animatedValue as Float
+				val offset = (1 - p) * 15
+				val blur = (1 - p) * 20
+				view.filter = "drop-shadow($offset $offset $blur rgba(0,0,0,0.6))"
+			}
+		}
+
+		growAnimator.addListener(object : android.animation.Animator.AnimatorListener {
+			override fun onAnimationStart(animation: android.animation.Animator) {}
+			override fun onAnimationCancel(animation: android.animation.Animator) {}
+			override fun onAnimationRepeat(animation: android.animation.Animator) {}
+			override fun onAnimationEnd(animation: android.animation.Animator) {
+				shrinkAnimator.start()
+			}
+		})
+
+		shrinkAnimator.addListener(object : android.animation.Animator.AnimatorListener {
+			override fun onAnimationStart(animation: android.animation.Animator) {}
+			override fun onAnimationCancel(animation: android.animation.Animator) {}
+			override fun onAnimationRepeat(animation: android.animation.Animator) {}
+			override fun onAnimationEnd(animation: android.animation.Animator) {
+				view.filter = ""
+				onComplete?.invoke()
+			}
+		})
+
+		growAnimator.start()
+	}
+
+	fun growShadow(view: StyleableTextView, onComplete: (() -> Unit)? = null) {
+		// Grow shadow: offset and blur increase
+		val growAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
+			duration = 800
+			addUpdateListener { animation ->
+				val p = animation.animatedValue as Float
+				val offset = p * 15
+				val blur = p * 20
+				view.filter = "drop-shadow($offset $offset $blur rgba(0,0,0,0.6))"
+			}
+		}
+
+		// Shrink shadow back
+		val shrinkAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
+			duration = 800
+			addUpdateListener { animation ->
+				val p = animation.animatedValue as Float
+				val offset = (1 - p) * 15
+				val blur = (1 - p) * 20
+				view.filter = "drop-shadow($offset $offset $blur rgba(0,0,0,0.6))"
+			}
+		}
+
+		growAnimator.addListener(object : android.animation.Animator.AnimatorListener {
+			override fun onAnimationStart(animation: android.animation.Animator) {}
+			override fun onAnimationCancel(animation: android.animation.Animator) {}
+			override fun onAnimationRepeat(animation: android.animation.Animator) {}
+			override fun onAnimationEnd(animation: android.animation.Animator) {
+				shrinkAnimator.start()
+			}
+		})
+
+		shrinkAnimator.addListener(object : android.animation.Animator.AnimatorListener {
+			override fun onAnimationStart(animation: android.animation.Animator) {}
+			override fun onAnimationCancel(animation: android.animation.Animator) {}
+			override fun onAnimationRepeat(animation: android.animation.Animator) {}
+			override fun onAnimationEnd(animation: android.animation.Animator) {
+				view.filter = ""
+				onComplete?.invoke()
+			}
+		})
+
+		growAnimator.start()
+	}
+
+	fun demoGrowShadow() {
+		val container = ContentLayout(this)
+		container.setBackgroundColor(Color.WHITE)
+		container.layoutParams = CommonLayoutParams(
+			ViewGroup.LayoutParams(
+				ViewGroup.LayoutParams.MATCH_PARENT,
+				ViewGroup.LayoutParams.MATCH_PARENT
+			)
+		)
+
+		val shadowLabel = StackLayout(this).apply {
+			setBackgroundColor(Color.parseColor("#3498db"))
+			layoutParams = CommonLayoutParams(
+				ViewGroup.LayoutParams(200, 200)
+			).apply {
+				gravity = android.view.Gravity.CENTER
+			}
+		}
+
+		val labelText = StyleableTextView(this).apply {
+			text = "Shadow"
+			setTextColor(Color.WHITE)
+			textSize = 24f
+		}
+		shadowLabel.addView(labelText)
+
+		val btn = Button(this).apply {
+			text = "Grow Shadow"
+			setOnClickListener {
+				growShadow(shadowLabel)
+			}
+		}
+
+		container.addView(shadowLabel)
+		container.addView(btn)
+		setContentView(container)
+	}
 }
diff --git a/packages/ui-mobile-base/android/widgets/build.gradle b/packages/ui-mobile-base/android/widgets/build.gradle
index b942f0634f..a477b7258f 100644
--- a/packages/ui-mobile-base/android/widgets/build.gradle
+++ b/packages/ui-mobile-base/android/widgets/build.gradle
@@ -3,6 +3,7 @@
 def isWinOs = System.properties['os.name'].toLowerCase().contains('windows')
 
 apply plugin: 'com.android.library'
+apply plugin: 'org.jetbrains.kotlin.android'
 
 def computeCompileSdkVersion() {
 	if (project.hasProperty("compileSdk")) {
@@ -43,9 +44,17 @@ android {
 			proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
 		}
 	}
+	compileOptions {
+		sourceCompatibility JavaVersion.VERSION_11
+		targetCompatibility JavaVersion.VERSION_11
+	}
+	kotlinOptions {
+		jvmTarget = '11'
+	}
 }
 
 dependencies {
+	implementation 'androidx.core:core-ktx:1.17.0'
 	def androidXViewPagerVersion = "1.1.0"
 	if (project.hasProperty("androidXViewPager")) {
 		androidXViewPagerVersion = androidXViewPager
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/CSSFilters.kt b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/CSSFilters.kt
new file mode 100644
index 0000000000..483ceb3442
--- /dev/null
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/CSSFilters.kt
@@ -0,0 +1,1176 @@
+package org.nativescript.widgets
+
+import android.app.ActivityManager
+import android.content.Context
+import android.content.res.Resources
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.ColorMatrix
+import android.graphics.ColorMatrixColorFilter
+import android.graphics.Paint
+import android.graphics.PorterDuff
+import android.graphics.PorterDuffColorFilter
+import android.graphics.RenderEffect
+import android.graphics.RenderNode
+import android.graphics.Shader
+import android.os.Build
+import android.renderscript.Allocation
+import android.renderscript.Element
+import android.renderscript.RenderScript
+import android.renderscript.ScriptIntrinsicBlur
+import android.view.View
+import androidx.annotation.RequiresApi
+import androidx.collection.LruCache
+import androidx.core.graphics.createBitmap
+import org.nativescript.widgets.CSSFilters.FilterHelper.Companion.createDropShadowBitmap
+import java.util.WeakHashMap
+import kotlin.math.ceil
+import kotlin.math.cos
+import kotlin.math.sin
+
+private val FILTER_REGEX = Regex("""(\w+(?:-\w+)?)\(([^()]*(?:\([^()]*\)[^()]*)*)\)""")
+private val SPLIT_REGEX = Regex("\\s+")
+private const val PI_FLOAT = Math.PI.toFloat()
+private const val RAD_TO_DEG = (180f / PI_FLOAT)
+
+
+class CSSFilters {
+
+	sealed class Filter {
+		data class Blur(val radiusPx: Float) : Filter()
+		data class Brightness(val value: Float) : Filter()
+		data class Contrast(val value: Float) : Filter()
+		data class Saturate(val value: Float) : Filter()
+		data class HueRotate(val degrees: Float) : Filter()
+		data class Invert(val amount: Float) : Filter() // 0..1
+		data class Opacity(val amount: Float) : Filter()   // 0..1
+		data class Sepia(val amount: Float) : Filter()    // 0..1
+		data class Grayscale(val amount: Float) : Filter()    // 0..1
+		data class DropShadow(
+			val offsetX: Float,
+			val offsetY: Float,
+			val blur: Float,
+			val color: Int
+		) : Filter()
+	}
+
+	internal class BitmapPool(context: Context) {
+		// How many bytes this pool is allowed to use
+		private val maxSizeBytes: Int
+
+		init {
+			val am = context.getSystemService(Context.ACTIVITY_SERVICE) as ActivityManager
+			val totalMem = am.memoryClass * 1024 * 1024
+			maxSizeBytes = totalMem / 4 // 1/4 of app’s heap
+		}
+
+		private fun bitmapByteSize(b: Bitmap): Int =
+			b.allocationByteCount   // safest API; works pre/post 26
+
+		/** LRUCache over *bytes* */
+		private val pool = object : LruCache<String, Bitmap>(maxSizeBytes) {
+			override fun sizeOf(key: String, value: Bitmap): Int {
+				return bitmapByteSize(value) // LRU will evict by total bytes
+			}
+
+			override fun entryRemoved(
+				evicted: Boolean,
+				key: String,
+				oldValue: Bitmap,
+				newValue: Bitmap?
+			) {
+				if (!oldValue.isRecycled) oldValue.recycle()
+			}
+		}
+
+		private fun key(
+			width: Int,
+			height: Int,
+			config: Bitmap.Config
+		) = "$width:$height:${config.name}"
+
+
+		fun getSourceBitmap(
+			width: Int,
+			height: Int,
+			config: Bitmap.Config = Bitmap.Config.ARGB_8888,
+		): Bitmap {
+			val k = "${key(width, height, config)}:source"
+			val cached = pool[k]
+			return if (cached != null && !cached.isRecycled) {
+				cached.eraseColor(Color.TRANSPARENT) // clear previous content
+				cached
+			} else {
+				createBitmap(width, height, config)
+			}
+		}
+
+		fun getBitmap(
+			width: Int,
+			height: Int,
+			config: Bitmap.Config = Bitmap.Config.ARGB_8888,
+		): Bitmap {
+			val k = key(width, height, config)
+			val cached = pool[k]
+			return if (cached != null && !cached.isRecycled) {
+				cached.eraseColor(Color.TRANSPARENT) // clear previous content
+				cached
+			} else {
+				createBitmap(width, height, config)
+			}
+		}
+
+		fun putBitmap(bitmap: Bitmap, source: Boolean? = null) {
+			if (bitmap.isRecycled) return
+			var k = key(bitmap.width, bitmap.height, bitmap.config ?: Bitmap.Config.ARGB_8888)
+			if (source == true) {
+				k = "$k:source"
+			}
+			if (pool[k] == null) {
+				pool.put(k, bitmap)
+			}
+		}
+
+		fun clear() {
+			pool.evictAll()
+		}
+	}
+
+	@Suppress("DEPRECATION")
+	internal class FilterHelper {
+		internal var source: Bitmap? = null
+		internal var shadowsOrBlurs: MutableList<Bitmap> = mutableListOf()
+		internal var cssFilter: ColorMatrix? = null
+
+		internal var getOrInitCssFilter: ColorMatrix
+			get() {
+				if (cssFilter == null) cssFilter = ColorMatrix()
+				return cssFilter!!
+			}
+			set(value) {
+				cssFilter = value
+			}
+
+		companion object {
+			fun createBlurBitmap(
+				context: Context,
+				width: Int,
+				height: Int,
+				blurRadius: Float,
+				source: Bitmap,
+				rs: RenderScript?
+			): Bitmap {
+				var destroyRS = false
+				var renderScript = rs
+
+				if (rs == null) {
+					renderScript = RenderScript.create(context)
+					destroyRS = true
+				}
+
+				val input = Allocation.createFromBitmap(rs, source)
+				val output = Allocation.createTyped(rs, input.type)
+				val script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs))
+				script.setRadius(blurRadius.coerceIn(0f, 25f))
+				script.setInput(input)
+				script.forEach(output)
+
+				val blurred = createBitmap(width, height)
+				output.copyTo(blurred)
+
+				if (destroyRS) {
+					renderScript?.destroy()
+				}
+
+				return blurred
+			}
+
+			fun createDropShadowBitmap(
+				context: Context,
+				offsetX: Float,
+				offsetY: Float,
+				width: Int,
+				height: Int,
+				blurRadius: Float,
+				color: Int,
+				source: Bitmap,
+				rs: RenderScript? = null,
+				destination: Canvas? = null
+			): Bitmap {
+				val pool = getPool(context)
+
+				// try cache first
+				val key = makeShadowCacheKey(source, offsetX, offsetY, blurRadius, color, width, height)
+				dropShadowCache[key]?.let { cached ->
+					// cached is immutable/shared — return directly
+					return cached
+				}
+
+				// compute padding to account for blur spread and support negative offsets
+				val pad = ceil(blurRadius * 3f).toInt().coerceAtLeast(0)
+				val offLeft = ceil(maxOf(0f, -offsetX)).toInt()
+				val offRight = ceil(maxOf(0f, offsetX)).toInt()
+				val offTop = ceil(maxOf(0f, -offsetY)).toInt()
+				val offBottom = ceil(maxOf(0f, offsetY)).toInt()
+
+				val leftPad = pad + offLeft
+				val rightPad = pad + offRight
+				val topPad = pad + offTop
+				val bottomPad = pad + offBottom
+
+				val outW = (width + leftPad + rightPad).coerceAtLeast(1)
+				val outH = (height + topPad + bottomPad).coerceAtLeast(1)
+
+				val shadowBmp = pool.getBitmap(outW, outH, source.config ?: Bitmap.Config.ARGB_8888)
+				// ensure transparent background
+				shadowBmp.eraseColor(Color.TRANSPARENT)
+				val canvas = destination ?: Canvas(shadowBmp)
+
+				var destroyRS = false
+				var renderScript = rs
+
+				if (rs == null) {
+					renderScript = RenderScript.create(context)
+					destroyRS = true
+				}
+
+				val paint = Paint().apply {
+					isAntiAlias = true
+					isFilterBitmap = true
+					colorFilter = PorterDuffColorFilter(color, PorterDuff.Mode.SRC_IN)
+				}
+
+				if (blurRadius > 0f) {
+					renderScript?.let { rsInner ->
+						// create a temp bitmap larger than source so blur doesn't get clipped
+						val tempW = source.width + pad * 2
+						val tempH = source.height + pad * 2
+						val tempBmp = pool.getBitmap(tempW, tempH, source.config ?: Bitmap.Config.ARGB_8888)
+
+						// draw source centered into tempBmp (pad margin)
+						val tempCanvas = Canvas(tempBmp)
+						tempCanvas.drawBitmap(source, pad.toFloat(), pad.toFloat(), null)
+
+						// run blur on tempBmp -> blurredBmp
+						val input = Allocation.createFromBitmap(rsInner, tempBmp)
+						val output = Allocation.createTyped(rsInner, input.type)
+						val script = ScriptIntrinsicBlur.create(rsInner, Element.U8_4(rsInner))
+						script.setRadius(blurRadius.coerceIn(0f, 25f))
+						script.setInput(input)
+						script.forEach(output)
+
+						val blurred = pool.getBitmap(tempW, tempH, tempBmp.config ?: Bitmap.Config.ARGB_8888)
+						output.copyTo(blurred)
+
+						val targetSourceX = leftPad.toFloat()
+						val targetSourceY = topPad.toFloat()
+
+						val drawX = targetSourceX - pad + offsetX
+						val drawY = targetSourceY - pad + offsetY
+
+						canvas.drawBitmap(blurred, drawX, drawY, paint)
+
+						// return temporary bitmaps to pool
+						pool.putBitmap(tempBmp)
+						pool.putBitmap(blurred)
+					}
+				} else {
+					// No blur — draw the tinted source directly at the offset
+					val targetSourceX = leftPad.toFloat()
+					val targetSourceY = topPad.toFloat()
+					canvas.drawBitmap(source, targetSourceX + offsetX, targetSourceY + offsetY, paint)
+				}
+
+				if (destroyRS) {
+					renderScript?.destroy()
+				}
+
+				// copy pooled shadow into an immutable cached bitmap and return pooled one to pool
+				val cachedCopy = shadowBmp.copy(Bitmap.Config.ARGB_8888, false)
+				// return the pooled shadow back to the pool, cachedCopy is the shared result
+				pool.putBitmap(shadowBmp)
+				dropShadowCache.put(key, cachedCopy)
+
+
+				return cachedCopy
+			}
+
+
+			fun build(view: View, filters: List<Filter>, draw: (Canvas) -> Unit): FilterHelper {
+				val helper = FilterHelper()
+				val pool = getPool(view.context)
+				val source = pool.getBitmap(view.width, view.height, Bitmap.Config.ARGB_8888)
+				val canvas = Canvas(source)
+				draw(canvas)
+				helper.source = source
+				pool.putBitmap(source)
+				var rs: RenderScript? = null
+				for (filter in filters) {
+					when (filter) {
+						is Filter.Blur -> {
+							if (filter.radiusPx > 0f) {
+								if (rs == null) {
+									rs = RenderScript.create(view.context)
+								}
+								helper.shadowsOrBlurs.add(
+									createBlurBitmap(
+										view.context, view.width, view.height, filter.radiusPx, source, rs
+									)
+								)
+							}
+						}
+
+						is Filter.Brightness -> {
+							helper.getOrInitCssFilter.postConcat(
+								ColorMatrix(brightness(filter.value))
+							)
+						}
+
+						is Filter.Contrast -> {
+							helper.getOrInitCssFilter.postConcat(
+								ColorMatrix(contrast(filter.value))
+							)
+						}
+
+						is Filter.DropShadow -> {
+
+							val key = makeShadowCacheKey(
+								source,
+								filter.offsetX,
+								filter.offsetY,
+								filter.blur,
+								filter.color,
+								view.width,
+								view.height
+							)
+
+							keyToView[view]?.add(key) ?: run {
+								keyToView[view] = HashSet<String>().apply {
+									add(key)
+								}
+							}
+
+							helper.shadowsOrBlurs.add(
+								createDropShadowBitmap(
+									view.context,
+									filter.offsetX,
+									filter.offsetY,
+									view.width,
+									view.height,
+									filter.blur,
+									filter.color,
+									source,
+									rs
+								)
+							)
+						}
+
+						is Filter.HueRotate -> {
+							helper.getOrInitCssFilter.postConcat(
+								ColorMatrix(hue(filter.degrees))
+							)
+						}
+
+						is Filter.Invert -> {
+							helper.getOrInitCssFilter.postConcat(
+								ColorMatrix(invert(filter.amount))
+							)
+						}
+
+						is Filter.Opacity -> {
+							helper.getOrInitCssFilter.postConcat(
+								ColorMatrix(opacity(filter.amount))
+							)
+						}
+
+						is Filter.Saturate -> {
+							helper.getOrInitCssFilter.postConcat(
+								ColorMatrix(saturate(filter.value))
+							)
+						}
+
+						is Filter.Sepia -> {
+							helper.getOrInitCssFilter.postConcat(
+								ColorMatrix(sepia(filter.amount))
+							)
+						}
+
+						is Filter.Grayscale -> {
+							helper.getOrInitCssFilter.postConcat(
+								ColorMatrix(grayscale(filter.amount))
+							)
+						}
+					}
+
+				}
+				rs?.destroy()
+				return helper
+			}
+		}
+	}
+
+	internal data class ShadowOrBlur(val shadow: RenderNode? = null, val blur: Bitmap? = null)
+
+	@Suppress("DEPRECATION")
+	@RequiresApi(Build.VERSION_CODES.Q)
+	internal class FilterHelperV2 {
+		internal var sourceFallback: Bitmap? = null
+		internal val sourceNode: RenderNode by lazy { RenderNode("source") }
+		internal var cssFilter: ColorMatrix? = null
+		internal val shadowsOrBlurs: MutableList<ShadowOrBlur> = mutableListOf()
+
+		internal var getOrInitCssFilter: ColorMatrix
+			get() {
+				if (cssFilter == null) cssFilter = ColorMatrix()
+				return cssFilter!!
+			}
+			set(value) {
+				cssFilter = value
+			}
+
+		companion object {
+			fun build(view: View, filters: List<Filter>, draw: (Canvas) -> Unit): FilterHelperV2 {
+				val helper = FilterHelperV2()
+				val pool = getPool(view.context)
+				var rs: RenderScript? = null
+				var needsBitmapFallback = false
+
+				// Try recording directly to RenderNode
+				try {
+					helper.sourceNode.setPosition(0, 0, view.width, view.height)
+					val canvas = helper.sourceNode.beginRecording()
+					draw(canvas)
+					helper.sourceNode.endRecording()
+				} catch (_: Exception) {
+					// Some devices forbid hardware-backed RenderNode drawing
+					needsBitmapFallback = true
+				}
+
+				// Fallback to bitmap if RenderNode recording fails
+				if (needsBitmapFallback) {
+					helper.sourceFallback = pool.getSourceBitmap(view.width, view.height)
+					val canvas = Canvas(helper.sourceFallback!!)
+					draw(canvas)
+				}
+
+
+				for (filter in filters) {
+					when (filter) {
+						is Filter.Blur -> {
+							if (filter.radiusPx > 0f) {
+								val source =
+									helper.sourceFallback ?: pool.getSourceBitmap(view.width, view.height).also {
+										val c = Canvas(it)
+										view.setTag(R.id.tag_suppress_ops, true)
+										view.draw(c)
+										view.setTag(R.id.tag_suppress_ops, false)
+									}
+
+								if (rs == null) rs = RenderScript.create(view.context)
+								val input = Allocation.createFromBitmap(rs, source)
+								val output = Allocation.createTyped(rs, input.type)
+								val script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs))
+								script.setRadius(filter.radiusPx.coerceIn(0.0001f, 25f))
+								script.setInput(input)
+								script.forEach(output)
+
+								val blurBmp = pool.getBitmap(view.width, view.height)
+								output.copyTo(blurBmp)
+
+								if (!needsBitmapFallback) {
+									val blurNode = RenderNode("blurNode")
+									blurNode.setPosition(0, 0, view.width, view.height)
+									val blurCanvas = blurNode.beginRecording()
+									blurCanvas.drawBitmap(
+										blurBmp, 0F, 0F, null
+									)
+									blurNode.endRecording()
+									helper.shadowsOrBlurs.add(ShadowOrBlur(blurNode))
+								} else {
+									helper.shadowsOrBlurs.add(ShadowOrBlur(null, blurBmp))
+								}
+							}
+						}
+
+						is Filter.DropShadow -> {
+							val src = helper.sourceFallback
+								?: pool.getBitmap(view.width, view.height).also {
+									val c = Canvas(it)
+									view.setTag(R.id.tag_suppress_ops, true)
+									view.draw(c)
+									view.setTag(R.id.tag_suppress_ops, false)
+								}
+
+							val shadowBmp = createDropShadowBitmap(
+								view.context,
+								filter.offsetX,
+								filter.offsetY,
+								view.width,
+								view.height,
+								filter.blur,
+								filter.color,
+								src,
+								rs
+							)
+
+							helper.shadowsOrBlurs.add(ShadowOrBlur(null, shadowBmp))
+
+							/*
+							if (!needsBitmapFallback) {
+								val shadowNode = RenderNode("shadow").apply {
+									setPosition(
+										0,
+										0,
+										view.width + filter.offsetX.toInt(),
+										view.height + filter.offsetY.toInt()
+									)
+									val shadowCanvas = beginRecording()
+									shadowCanvas.drawBitmap(shadowBmp, 0f, 0f, null)
+									endRecording()
+								}
+								helper.shadowsOrBlurs.add(ShadowOrBlur(shadowNode))
+							} else {
+								helper.shadowsOrBlurs.add(ShadowOrBlur(null, shadowBmp))
+							}
+							*/
+							// shadowBmp will be recycled later when pool evicts
+						}
+
+						is Filter.Brightness -> helper.getOrInitCssFilter.postConcat(brightness(filter.value))
+						is Filter.Contrast -> helper.getOrInitCssFilter.postConcat(contrast(filter.value))
+						is Filter.Saturate -> helper.getOrInitCssFilter.postConcat(saturate(filter.value))
+						is Filter.HueRotate -> helper.getOrInitCssFilter.postConcat(hue(filter.degrees))
+						is Filter.Invert -> helper.getOrInitCssFilter.postConcat(invert(filter.amount))
+						is Filter.Opacity -> helper.getOrInitCssFilter.postConcat(opacity(filter.amount))
+						is Filter.Sepia -> helper.getOrInitCssFilter.postConcat(sepia(filter.amount))
+						is Filter.Grayscale -> helper.getOrInitCssFilter.postConcat(grayscale(filter.amount))
+					}
+				}
+
+				rs?.destroy()
+				return helper
+			}
+		}
+	}
+
+	@RequiresApi(Build.VERSION_CODES.S)
+	internal class FilterHelperV3 {
+		internal var filter: RenderEffect? = null
+
+		internal val sourceNode: RenderNode by lazy {
+			RenderNode("source")
+		}
+
+		internal var hasComposite = false
+		internal val compositeNode: RenderNode by lazy {
+			hasComposite = true
+			RenderNode("composite")
+		}
+
+		internal var shadowNodes: ArrayList<RenderNode> = arrayListOf()
+
+		companion object {
+			fun build(view: View, filters: List<Filter>, draw: (Canvas) -> Unit): FilterHelperV3 {
+				val helper = FilterHelperV3()
+				var sourceDrawn = false
+
+
+				val effects = mutableListOf<RenderEffect>()
+				for (filter in filters) {
+					when (filter) {
+						is Filter.Blur -> {
+							if (filter.radiusPx > 0) {
+								effects.add(
+									RenderEffect.createBlurEffect(
+										filter.radiusPx, filter.radiusPx, Shader.TileMode.CLAMP
+									)
+								)
+							}
+						}
+
+						is Filter.Brightness -> {
+							effects.add(
+								RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(brightness(filter.value)))
+							)
+						}
+
+						is Filter.Contrast -> {
+							effects.add(
+								RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(contrast(filter.value)))
+							)
+						}
+
+						is Filter.DropShadow -> {
+
+							if (!sourceDrawn) {
+								helper.sourceNode.setPosition(0, 0, view.width, view.height)
+								val sourceCanvas = helper.sourceNode.beginRecording()
+
+								view.setTag(R.id.tag_suppress_ops, true)
+								view.draw(sourceCanvas)
+								view.setTag(R.id.tag_suppress_ops, false)
+
+								helper.sourceNode.endRecording()
+								sourceDrawn = true
+							}
+
+							val colorFilter = ColorMatrixColorFilter(
+								ColorMatrix(
+									floatArrayOf(
+										0f, 0f, 0f, 0f, Color.red(filter.color).toFloat(),
+										0f, 0f, 0f, 0f, Color.green(filter.color).toFloat(),
+										0f, 0f, 0f, 0f, Color.blue(filter.color).toFloat(),
+										0f, 0f, 0f, Color.alpha(filter.color) / 255f, 0f
+									)
+								)
+							)
+
+							val colorEffect = RenderEffect.createColorFilterEffect(colorFilter)
+
+							val shadowEffect = if (filter.blur > 0f) {
+								val blurEffect = RenderEffect.createBlurEffect(
+									filter.blur, filter.blur, Shader.TileMode.CLAMP
+								)
+								RenderEffect.createChainEffect(colorEffect, blurEffect)
+							} else {
+								colorEffect
+							}
+
+							val offsetEffect = RenderEffect.createOffsetEffect(
+								filter.offsetX,
+								filter.offsetY,
+								shadowEffect
+							)
+
+							val shadowNode = RenderNode("shadow")
+							shadowNode.setRenderEffect(offsetEffect)
+							shadowNode.setPosition(
+								0,
+								0,
+								view.width + kotlin.math.abs(filter.offsetX).toInt() + filter.blur.toInt() * 3,
+								view.height + kotlin.math.abs(filter.offsetY).toInt() + filter.blur.toInt() * 3
+							)
+
+							val shadowCanvas = shadowNode.beginRecording()
+							shadowCanvas.drawRenderNode(helper.sourceNode)
+							shadowNode.endRecording()
+
+							helper.shadowNodes.add(shadowNode)
+						}
+
+						is Filter.HueRotate -> {
+							effects.add(
+								RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(hue(filter.degrees)))
+							)
+						}
+
+						is Filter.Invert -> {
+							effects.add(
+								RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(invert(filter.amount)))
+							)
+						}
+
+						is Filter.Opacity -> {
+							effects.add(
+								RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(opacity(filter.amount)))
+							)
+						}
+
+						is Filter.Saturate -> {
+							effects.add(
+								RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(saturate(filter.value)))
+							)
+						}
+
+						is Filter.Sepia -> {
+							effects.add(
+								RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(sepia(filter.amount)))
+							)
+						}
+
+						is Filter.Grayscale -> {
+							effects.add(
+								RenderEffect.createColorFilterEffect(ColorMatrixColorFilter(grayscale(filter.amount)))
+							)
+						}
+					}
+
+				}
+				helper.filter = chain(*effects.toTypedArray())
+				helper.filter?.let {
+
+					if (helper.shadowNodes.isNotEmpty()) {
+						helper.compositeNode.setPosition(0, 0, view.width, view.height)
+
+						val compositeCanvas = helper.compositeNode.beginRecording()
+
+						for (node in helper.shadowNodes) {
+							compositeCanvas.drawRenderNode(node)
+						}
+
+						compositeCanvas.drawRenderNode(helper.sourceNode)
+
+						helper.compositeNode.endRecording()
+						helper.compositeNode.setRenderEffect(helper.filter)
+					}
+				}
+				return helper
+			}
+		}
+	}
+
+	class CSSFilter(css: String, val filters: List<Filter>) {
+		internal var invalid = false
+
+		internal var css: String = ""
+
+		internal var v1: FilterHelper? = null
+
+		internal var v2: Any? = null
+
+		internal var v3: Any? = null
+
+		init {
+			this.css = css
+		}
+
+		fun renderFilters(view: View, canvas: Canvas, draw: (Canvas) -> Unit) {
+			val invalid = !(view.width > 0 && view.height > 0)
+
+			if (invalid) {
+				this.invalid = true
+				return
+			}
+			this.invalid = false
+
+			if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+				val filter = FilterHelperV3.build(view, filters, draw)
+				v3 = filter
+				if (filter.shadowNodes.isEmpty()) {
+					view.setRenderEffect(filter.filter)
+				} else {
+					view.setRenderEffect(null)
+					if (filter.hasComposite) {
+						canvas.drawRenderNode(filter.compositeNode)
+					} else {
+						for (node in filter.shadowNodes) {
+							canvas.drawRenderNode(node)
+						}
+						filter.sourceNode.setRenderEffect(filter.filter)
+						canvas.drawRenderNode(filter.sourceNode)
+					}
+				}
+
+				return
+			} else if (view.isHardwareAccelerated && Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+				val filter = FilterHelperV2.build(view, filters, draw)
+				v2 = filter
+				val checkpoint = canvas.saveLayer(null, null)
+
+				// If there's a color matrix that must affect both shadows and source,
+				// composite shadows + source into an offscreen bitmap and then draw with the color filter.
+				filter.cssFilter?.let { matrix ->
+					val pool = getPool(view.context)
+					val tmp = pool.getSourceBitmap(view.width, view.height)
+					val tmpCanvas = Canvas(tmp)
+					// draw shadows/blurs into temp
+					for (node in filter.shadowsOrBlurs) {
+						node.shadow?.let {
+							tmpCanvas.drawRenderNode(it)
+						}
+						node.blur?.let {
+							tmpCanvas.drawBitmap(it, 0f, 0f, null)
+						}
+					}
+
+					// draw source into temp (use recorded fallback if available)
+					val sourceBmp = filter.sourceFallback ?: run {
+						val bmp = pool.getSourceBitmap(view.width, view.height)
+						val c = Canvas(bmp)
+						view.setTag(R.id.tag_suppress_ops, true)
+						view.draw(c)
+						view.setTag(R.id.tag_suppress_ops, false)
+						bmp
+					}
+
+					tmpCanvas.drawBitmap(sourceBmp, 0f, 0f, null)
+
+					// draw composited temp with color matrix applied
+					val paint = Paint().apply {
+						colorFilter = ColorMatrixColorFilter(matrix)
+					}
+					canvas.drawBitmap(tmp, 0f, 0f, paint)
+					//  pool.putBitmap(tmp, true)
+				} ?: run {
+					// no color matrix -> draw shadows/blurs + source directly
+					for (node in filter.shadowsOrBlurs) {
+						node.shadow?.let {
+							canvas.drawRenderNode(it)
+						}
+						node.blur?.let {
+							canvas.drawBitmap(it, 0f, 0f, null)
+						}
+					}
+
+					filter.sourceFallback?.let { src ->
+						canvas.drawBitmap(src, 0f, 0f, null)
+					} ?: run {
+						canvas.drawRenderNode(filter.sourceNode)
+					}
+				}
+
+				canvas.restoreToCount(checkpoint)
+				return
+			}
+
+
+			v1 = FilterHelper.build(view, filters, draw)
+			v1?.let {
+				for (bm in it.shadowsOrBlurs) {
+					canvas.drawBitmap(bm, 0f, 0f, null)
+				}
+
+				it.source?.let { source ->
+					it.cssFilter?.let { matrix ->
+						val paint = Paint().apply {
+							colorFilter = ColorMatrixColorFilter(matrix)
+						}
+						canvas.drawBitmap(source, 0f, 0f, paint)
+					} ?: run {
+						canvas.drawBitmap(source, 0f, 0f, null)
+					}
+				}
+
+			}
+		}
+	}
+
+	companion object {
+
+		private var mPool: BitmapPool? = null
+
+		internal fun getPool(context: Context): BitmapPool {
+			if (mPool == null) {
+				mPool = BitmapPool(context)
+			}
+			// failure is not an option!!!
+			return mPool!!
+		}
+
+		@RequiresApi(Build.VERSION_CODES.S)
+		private fun chain(vararg effects: RenderEffect?): RenderEffect? {
+			var out: RenderEffect? = null
+			for (e in effects) {
+				if (e == null) continue
+				out = if (out == null) e else RenderEffect.createChainEffect(e, out)
+			}
+			return out
+		}
+
+		private fun grayscale(value: Float): ColorMatrix {
+			val cm = ColorMatrix()
+			val sat = 1f - value
+			cm.setSaturation(sat)
+			return cm
+		}
+
+		private fun brightness(value: Float): ColorMatrix {
+			// value = 1 → normal
+			val cm = ColorMatrix(
+				floatArrayOf(
+					value, 0f, 0f, 0f, 0f,
+					0f, value, 0f, 0f, 0f,
+					0f, 0f, value, 0f, 0f,
+					0f, 0f, 0f, 1f, 0f
+				)
+			)
+			return cm
+		}
+
+		private fun contrast(value: Float): ColorMatrix {
+			val t = 128f * (1f - value)
+			return ColorMatrix(
+				floatArrayOf(
+					value, 0f, 0f, 0f, t,
+					0f, value, 0f, 0f, t,
+					0f, 0f, value, 0f, t,
+					0f, 0f, 0f, 1f, 0f
+				)
+			)
+		}
+
+		private fun hue(degrees: Float): ColorMatrix {
+			val rotation = degrees * Math.PI / 180
+			val cos = cos(rotation).toFloat()
+			val sin = sin(rotation).toFloat()
+
+			val r1 = floatArrayOf(
+				0.213f + cos * 0.787f - sin * 0.213f,
+				0.715f - cos * 0.715f - sin * 0.715f,
+				0.072f - cos * 0.072f + sin * 0.928f,
+				0f, 0f
+			)
+			val r2 = floatArrayOf(
+				0.213f - cos * 0.213f + sin * 0.143f,
+				0.715f + cos * 0.285f + sin * 0.140f,
+				0.072f - cos * 0.072f - sin * 0.283f,
+				0f, 0f
+			)
+			val r3 = floatArrayOf(
+				0.213f - cos * 0.213f - sin * 0.787f,
+				0.715f - cos * 0.715f + sin * 0.715f,
+				0.072f + cos * 0.928f + sin * 0.072f,
+				0f, 0f
+			)
+
+			val cm = ColorMatrix()
+			cm.set(arrayOf(r1, r2, r3, floatArrayOf(0f, 0f, 0f, 1f, 0f)).flatMap { it.toList() }
+				.toFloatArray())
+			return cm
+		}
+
+		private fun opacity(alpha: Float): ColorMatrix {
+			return ColorMatrix(
+				floatArrayOf(
+					1f, 0f, 0f, 0f, 0f,
+					0f, 1f, 0f, 0f, 0f,
+					0f, 0f, 1f, 0f, 0f,
+					0f, 0f, 0f, alpha, 0f
+				)
+			)
+		}
+
+		private fun sepia(percent: Float): ColorMatrix {
+			val t = percent.coerceIn(0f, 1f)
+
+			val sepia = floatArrayOf(
+				0.393f, 0.769f, 0.189f, 0f, 0f,
+				0.349f, 0.686f, 0.168f, 0f, 0f,
+				0.272f, 0.534f, 0.131f, 0f, 0f,
+				0f, 0f, 0f, 1f, 0f
+			)
+
+			val identity = FloatArray(20) { i -> if (i % 6 == 0) 1f else 0f } // identity matrix
+
+			val result = FloatArray(20) { i ->
+				identity[i] * (1f - t) + sepia[i] * t
+			}
+
+			return ColorMatrix(result)
+		}
+
+		private fun invert(percent: Float): ColorMatrix {
+			val t = percent.coerceIn(0f, 1f)
+
+			val identity = floatArrayOf(
+				1f, 0f, 0f, 0f, 0f,
+				0f, 1f, 0f, 0f, 0f,
+				0f, 0f, 1f, 0f, 0f,
+				0f, 0f, 0f, 1f, 0f
+			)
+
+			val invert = floatArrayOf(
+				-1f, 0f, 0f, 0f, 255f,
+				0f, -1f, 0f, 0f, 255f,
+				0f, 0f, -1f, 0f, 255f,
+				0f, 0f, 0f, 1f, 0f
+			)
+
+			val result = FloatArray(20) { i ->
+				identity[i] * (1f - t) + invert[i] * t
+			}
+
+			return ColorMatrix(result)
+		}
+
+		private fun saturate(percent: Float): ColorMatrix {
+			val cm = ColorMatrix()
+			cm.setSaturation(percent)
+			return cm
+		}
+
+		internal fun parseCssColor(value: String): Int {
+			val trimmed = value.trim().lowercase()
+
+			return when {
+				trimmed.startsWith("#") -> {
+					val hex = trimmed.removePrefix("#")
+					when (hex.length) {
+						3 -> {
+							// #RGB → expand
+							val r = hex[0].toString().repeat(2).toInt(16)
+							val g = hex[1].toString().repeat(2).toInt(16)
+							val b = hex[2].toString().repeat(2).toInt(16)
+							0xFF000000.toInt() or (r shl 16) or (g shl 8) or b
+						}
+
+						6 -> {
+							// #RRGGBB
+							0xFF000000.toInt() or hex.toInt(16)
+						}
+
+						8 -> {
+							// #AARRGGBB
+							hex.toLong(16).toInt()
+						}
+
+						else -> Color.BLACK
+					}
+				}
+
+				trimmed.startsWith("rgb(") -> {
+					val nums =
+						trimmed.removePrefix("rgb(").removeSuffix(")").split(",").map { it.trim().toInt() }
+					val (r, g, b) = nums
+					0xFF000000.toInt() or (r shl 16) or (g shl 8) or b
+				}
+
+				trimmed.startsWith("rgba(") -> {
+					val nums = trimmed.removePrefix("rgba(").removeSuffix(")").split(",").map { it.trim() }
+					val r = nums[0].toInt()
+					val g = nums[1].toInt()
+					val b = nums[2].toInt()
+					val a = (nums[3].toFloat() * 255f).toInt().coerceIn(0, 255)
+					(a shl 24) or (r shl 16) or (g shl 8) or b
+				}
+
+				else -> COLOR_MAP[trimmed] ?: Color.BLACK
+			}
+		}
+
+		private fun parseCssAngle(value: String): Float {
+			val trimmed = value.trim().lowercase()
+			return when {
+				trimmed.endsWith("deg") -> trimmed.removeSuffix("deg").toFloatOrNull() ?: 0f
+				trimmed.endsWith("grad") -> (trimmed.removeSuffix("grad").toFloatOrNull() ?: 0f) * 0.9f
+				trimmed.endsWith("rad") -> (trimmed.removeSuffix("rad").toFloatOrNull() ?: 0f) * RAD_TO_DEG
+				trimmed.endsWith("turn") -> (trimmed.removeSuffix("turn").toFloatOrNull() ?: 0f) * 360f
+				else -> trimmed.toFloatOrNull() ?: 0f
+			}
+		}
+
+		private fun parseCssFloat(
+			value: String,
+			default: Float = 0f,
+			canUseDip: Boolean = false
+		): Float {
+			return when {
+				value.endsWith("px") -> value.removeSuffix("px").toFloatOrNull() ?: default
+				value.endsWith("%") -> (value.removeSuffix("%").toFloatOrNull() ?: default) / 100f
+				else -> {
+					val ret = value.toFloatOrNull() ?: default
+					if (canUseDip) {
+						ret * Resources.getSystem().displayMetrics.density
+					} else {
+						ret
+					}
+				}
+			}
+		}
+
+		private fun parseDropShadow(value: String): Filter.DropShadow? {
+			val tokens = mutableListOf<String>()
+			val sb = StringBuilder()
+			var parenDepth = 0
+
+			for (c in value.trim()) {
+				when {
+					c == '(' -> {
+						parenDepth++
+						sb.append(c)
+					}
+
+					c == ')' -> {
+						parenDepth--
+						sb.append(c)
+					}
+
+					c.isWhitespace() && parenDepth == 0 -> {
+						if (sb.isNotEmpty()) {
+							tokens.add(sb.toString())
+							sb.clear()
+						}
+					}
+
+					else -> sb.append(c)
+				}
+			}
+
+			if (sb.isNotEmpty()) tokens.add(sb.toString())
+			if (tokens.size < 2) return null
+
+			val offsetX = parseCssFloat(tokens[0], 0f, true)
+			val offsetY = parseCssFloat(tokens[1], 0f, true)
+			val blur = if (tokens.size >= 3) parseCssFloat(tokens[2], 0f, true) else 0f
+
+			val color = if (tokens.size >= 4) {
+				parseCssColor(tokens.subList(3, tokens.size).joinToString(" "))
+			} else {
+				Color.BLACK
+			}
+
+			return Filter.DropShadow(offsetX, offsetY, blur, color)
+		}
+
+
+		// small LRU to avoid re-blurring identical source + params in the same runtime
+		private val dropShadowCache = LruCache<String, Bitmap>(32)
+
+		private fun makeShadowCacheKey(
+			source: Bitmap,
+			offsetX: Float,
+			offsetY: Float,
+			blurRadius: Float,
+			color: Int,
+			width: Int,
+			height: Int
+		): String {
+			return "${System.identityHashCode(source)}:${source.width}x${source.height}:" +
+				"${width}x${height}:" +
+				"${offsetX.toDouble()}_${offsetY.toDouble()}_${blurRadius.toDouble()}_$color"
+		}
+
+		private val keyToView = WeakHashMap<View, HashSet<String>>()
+
+		@JvmStatic
+		fun invalidateCssFilters(view: View) {
+			keyToView[view]?.let {
+				for (key in it) {
+					dropShadowCache.remove(key)
+				}
+			}
+		}
+
+		@JvmStatic
+		fun parse(value: String): CSSFilter {
+			val filters = mutableListOf<Filter>()
+
+			FILTER_REGEX.findAll(value).forEach { match ->
+				val name = match.groupValues[1].lowercase()
+				val value = match.groupValues[2].trim()
+
+				when (name) {
+					"blur" -> filters.add(Filter.Blur(parseCssFloat(value, 0f, true)))
+					"brightness" -> filters.add(Filter.Brightness(parseCssFloat(value, 1f)))
+					"contrast" -> filters.add(Filter.Contrast(parseCssFloat(value, 1f)))
+					"saturate" -> filters.add(Filter.Saturate(parseCssFloat(value, 1f)))
+					"hue-rotate" -> filters.add(Filter.HueRotate(parseCssAngle(value)))
+					"invert" -> filters.add(Filter.Invert(parseCssFloat(value, 0f)))
+					"opacity" -> filters.add(Filter.Opacity(parseCssFloat(value, 1f)))
+					"sepia" -> filters.add(Filter.Sepia(parseCssFloat(value, 0f)))
+					"grayscale" -> filters.add(Filter.Grayscale(parseCssFloat(value, 0f)))
+					"drop-shadow" -> parseDropShadow(value)?.let { filters.add(it) }
+				}
+			}
+
+			return CSSFilter(
+				if (filters.isNotEmpty()) {
+					value
+				} else {
+					""
+				}, filters
+			)
+		}
+	}
+}
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/Colors.kt b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/Colors.kt
new file mode 100644
index 0000000000..85fd91fd80
--- /dev/null
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/Colors.kt
@@ -0,0 +1,29 @@
+package org.nativescript.widgets
+
+import android.graphics.Color
+
+internal val COLOR_MAP = mapOf(
+	"crimson" to 0xFFDC143C.toInt(),
+	"skyblue" to 0xFF87CEEB.toInt(),
+	"cyan" to Color.CYAN,
+	"black" to Color.BLACK,
+	"silver" to 0xFFC0C0C0.toInt(),
+	"gray" to Color.GRAY,
+	"grey" to Color.GRAY,
+	"white" to Color.WHITE,
+	"maroon" to 0xFF800000.toInt(),
+	"red" to Color.RED,
+	"fuchsia" to 0xFFFF00FF.toInt(),
+	"green" to 0xFF008000.toInt(),
+	"lime" to 0xFF00FF00.toInt(),
+	"olive" to 0xFF808000.toInt(),
+	"yellow" to 0xFFFFFF00.toInt(),
+	"navy" to 0xFF000080.toInt(),
+	"blue" to 0xFF0000FF.toInt(),
+	"teal" to 0xFF008080.toInt(),
+	"aqua" to 0xFF00FFFF.toInt(),
+	"orange" to 0xFFFFA500.toInt(),
+	"brown" to 0xFFA52A2A.toInt(),
+	"pink" to 0xFFFFC0CB.toInt(),
+	"transparent" to 0x00000000
+)
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ImageView.java b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ImageView.java
index 81c7de963e..da435d06ba 100644
--- a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ImageView.java
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ImageView.java
@@ -15,6 +15,7 @@
 import android.graphics.drawable.Drawable;
 import android.os.Build;
 
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.appcompat.app.AppCompatDelegate;
 
@@ -22,6 +23,9 @@
 import org.nativescript.widgets.image.Fetcher;
 import org.nativescript.widgets.image.Worker;
 
+import kotlin.Unit;
+import kotlin.jvm.functions.Function1;
+
 /**
  * @author hhristov
  */
@@ -292,6 +296,33 @@ private void setBitmapShader() {
 
 	}
 
+	@Nullable
+	private CSSFilters.CSSFilter mFilter = null;
+
+	private String mFilterRaw = "";
+
+	public String getFilter() {
+		return mFilterRaw;
+	}
+
+	public void setFilter(String value) {
+		mFilterRaw = value;
+		boolean hadFilters = mFilter != null && !mFilter.getFilters().isEmpty();
+		mFilter = CSSFilters.parse(value);
+		if (!mFilter.getFilters().isEmpty() || (value.isEmpty() && hadFilters)) {
+			invalidate();
+		}
+	}
+
+	@Override
+	public void draw(@NonNull Canvas canvas) {
+		Object suppress = getTag(R.id.tag_suppress_ops);
+		if (suppress != null && (boolean) suppress) {
+			super.onDraw(canvas);
+		} else {
+			super.draw(canvas);
+		}
+	}
 
 	@Override
 	protected void onDraw(Canvas canvas) {
@@ -420,6 +451,17 @@ protected void onDraw(Canvas canvas) {
 			}
 			canvas.drawPath(path, paint);
 		}
+
+
+		ViewUtils.onDraw(
+			this, canvas, mFilter, new Function1<Canvas, Unit>() {
+				@Override
+				public Unit invoke(Canvas canvas) {
+					ImageView.super.onDraw(canvas);
+					return null;
+				}
+			}
+		);
 	}
 
 	@Override
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/LayoutBase.java b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/LayoutBase.java
index ea0b256115..16abc04cd0 100644
--- a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/LayoutBase.java
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/LayoutBase.java
@@ -1,6 +1,7 @@
 package org.nativescript.widgets;
 
 import android.content.Context;
+import android.graphics.Canvas;
 import android.util.AttributeSet;
 import android.view.Gravity;
 import android.view.MotionEvent;
@@ -17,6 +18,9 @@
 import java.nio.ByteBuffer;
 import java.nio.ByteOrder;
 
+import kotlin.Unit;
+import kotlin.jvm.functions.Function1;
+
 /**
  * @author hhristov
  */
@@ -476,5 +480,42 @@ public int getOverflowEdge() {
 	}
 
 
+	@Override
+	public void draw(@NonNull Canvas canvas) {
+		Object suppress = getTag(R.id.tag_suppress_ops);
+		if (suppress != null && (boolean) suppress) {
+			super.dispatchDraw(canvas);
+		} else {
+			super.draw(canvas);
+		}
+	}
+
+	@Override
+	protected void dispatchDraw(@NonNull Canvas canvas) {
+		ViewUtils.dispatchDraw(this, canvas, mFilter, new Function1<Canvas, Unit>() {
+			@Override
+			public Unit invoke(Canvas canvas) {
+				LayoutBase.super.dispatchDraw(canvas);
+				return null;
+			}
+		});
+	}
+
+	@Nullable
+	private CSSFilters.CSSFilter mFilter = null;
+
+	private String mFilterRaw = "";
 
+	public String getFilter() {
+		return mFilterRaw;
+	}
+
+	public void setFilter(String value) {
+		mFilterRaw = value;
+		boolean hadFilters = mFilter != null && !mFilter.getFilters().isEmpty();
+		mFilter = CSSFilters.parse(value);
+		if (!mFilter.getFilters().isEmpty() || (value.isEmpty() && hadFilters)) {
+			invalidate();
+		}
+	}
 }
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/StyleableTextView.java b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/StyleableTextView.java
index 78fa5b2cd5..0d160e582b 100644
--- a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/StyleableTextView.java
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/StyleableTextView.java
@@ -4,6 +4,12 @@
 import android.graphics.Canvas;
 import android.text.TextPaint;
 
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import kotlin.Unit;
+import kotlin.jvm.functions.Function1;
+
 /**
  * @author NathanWalker
  */
@@ -16,15 +22,56 @@ public StyleableTextView(Context context) {
 		super(context);
 	}
 
+
+	@Nullable
+	private CSSFilters.CSSFilter mFilter = null;
+
+	private String mFilterRaw = "";
+
+	public String getFilter() {
+		return mFilterRaw;
+	}
+
+	public void setFilter(String value) {
+		mFilterRaw = value;
+		boolean hadFilters = mFilter != null && !mFilter.getFilters().isEmpty();
+		mFilter = CSSFilters.parse(value);
+		if (!mFilter.getFilters().isEmpty() || (value.isEmpty() && hadFilters)) {
+			invalidate();
+		}
+	}
+
 	@Override
-	protected void onDraw(Canvas canvas) {
-		if (mTextStrokeWidth > 0) {
-			_applyStroke(canvas);
-		} else {
+	public void draw(@NonNull Canvas canvas) {
+		Object suppress = getTag(R.id.tag_suppress_ops);
+		if (suppress != null && (boolean) suppress) {
 			super.onDraw(canvas);
+		} else {
+			super.draw(canvas);
 		}
 	}
 
+	@Override
+	protected void onDraw(Canvas canvas) {
+		ViewUtils.onDraw(this, canvas, mFilter, new Function1<Canvas, Unit>() {
+			@Override
+			public Unit invoke(Canvas canvas) {
+				if (mTextStrokeWidth > 0) {
+					_applyStroke(canvas);
+				} else {
+					StyleableTextView.super.onDraw(canvas);
+				}
+				return null;
+			}
+		});
+	}
+
+	@Override
+	public void requestLayout() {
+		super.requestLayout();
+		CSSFilters.invalidateCssFilters(this);
+	}
+
 	public void setTextStroke(int width, int color, int textColor) {
 		mTextStrokeWidth = width;
 		mTextStrokeColor = color;
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ViewUtils.kt b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ViewUtils.kt
new file mode 100644
index 0000000000..bf0e154b30
--- /dev/null
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ViewUtils.kt
@@ -0,0 +1,63 @@
+package org.nativescript.widgets
+
+import android.graphics.Canvas
+import android.os.Build
+import androidx.core.graphics.withSave
+
+class ViewUtils {
+	companion object {
+		private fun render(
+			view: android.view.View,
+			canvas: Canvas,
+			filter: CSSFilters.CSSFilter?,
+			superDraw: (Canvas) -> Unit,
+		) {
+			val suppressOps = view.getTag(R.id.tag_suppress_ops) as? Boolean ?: false
+			if (suppressOps || (filter == null)) {
+				superDraw(canvas)
+				return
+			}
+
+			canvas.withSave {
+				// Draw content with filters
+				if (filter.filters.isEmpty()) {
+					if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+						view.setRenderEffect(null)
+					}
+					superDraw(canvas)
+					return
+				}
+				filter.renderFilters(view, canvas) { destCanvas ->
+					if (filter.v1 != null || filter.v2 != null) {
+						superDraw(destCanvas)
+					}
+				}
+				if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+					if ((filter.v3 as? CSSFilters.FilterHelperV3)?.hasComposite != true) {
+						superDraw(canvas)
+					}
+				}
+			}
+		}
+
+		@JvmStatic
+		fun onDraw(
+			view: android.view.View,
+			canvas: Canvas,
+			filter: CSSFilters.CSSFilter?,
+			superDraw: (Canvas) -> Unit,
+		) {
+			render(view, canvas, filter, superDraw)
+		}
+
+		@JvmStatic
+		fun dispatchDraw(
+			view: android.view.View,
+			canvas: Canvas,
+			filter: CSSFilters.CSSFilter?,
+			superDraw: (Canvas) -> Unit,
+		) {
+			render(view, canvas, filter, superDraw)
+		}
+	}
+}
diff --git a/packages/ui-mobile-base/android/widgets/src/main/res/values/ids.xml b/packages/ui-mobile-base/android/widgets/src/main/res/values/ids.xml
new file mode 100644
index 0000000000..26dbfae0cc
--- /dev/null
+++ b/packages/ui-mobile-base/android/widgets/src/main/res/values/ids.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+	<item name="tag_suppress_ops" type="id"/>
+</resources>

From e6c5c458eb07fdf1159a253ed4ceaa00378058b8 Mon Sep 17 00:00:00 2001
From: Osei Fortune <fortune.osei@yahoo.com>
Date: Wed, 18 Feb 2026 11:47:55 -0400
Subject: [PATCH 2/4] clean up comment

---
 packages/core/ui/text-base/index.android.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/ui/text-base/index.android.ts b/packages/core/ui/text-base/index.android.ts
index 2f11ca9c7d..cb018133c3 100644
--- a/packages/core/ui/text-base/index.android.ts
+++ b/packages/core/ui/text-base/index.android.ts
@@ -330,7 +330,7 @@ export class TextBase extends TextBaseCommon {
 				break;
 			case 'center':
 				if (supportsRtlTextAlign) {
-					//	this.nativeTextViewProtected.setTextAlignment(android.view.View.TEXT_ALIGNMENT_CENTER);
+					this.nativeTextViewProtected.setTextAlignment(android.view.View.TEXT_ALIGNMENT_CENTER);
 				}
 				this.nativeTextViewProtected.setGravity(android.view.Gravity.CENTER_HORIZONTAL | verticalGravity);
 				break;

From 64e346b43dbee2eccfefb51ed2a8c56ecb206bd4 Mon Sep 17 00:00:00 2001
From: Osei Fortune <fortune.osei@yahoo.com>
Date: Wed, 18 Feb 2026 12:13:49 -0400
Subject: [PATCH 3/4] chore: remove ts-ignore

---
 packages/core/ui/core/view/index.android.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts
index c72ba44a60..3cc4f3d842 100644
--- a/packages/core/ui/core/view/index.android.ts
+++ b/packages/core/ui/core/view/index.android.ts
@@ -1609,10 +1609,11 @@ export class View extends ViewCommon {
 		return '';
 	}
 	[filterProperty.setNative](value: string) {
-		const nativeView = this.nativeViewProtected;
-		//@ts-ignore
-		if ('setFilter' in nativeView) {
-			// @ts-ignore
+		// LayoutBase, ImageView and StyleableTextView has the setFilter method implemented in the native view, so we need to check before call it.
+		const nativeView: globalAndroid.view.View & {
+			setFilter?: (value: string) => void;
+		} = this.nativeViewProtected;
+		if (typeof nativeView['setFilter'] === 'function') {
 			nativeView.setFilter(value);
 		}
 	}

From 5cccbdc3028058762c0735298d09c7b186ce08e9 Mon Sep 17 00:00:00 2001
From: Osei Fortune <fortune.osei@yahoo.com>
Date: Fri, 3 Apr 2026 15:47:42 -0400
Subject: [PATCH 4/4] chore: clean up

---
 packages/core/platforms/ios/src/CSSFilters.swift | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/core/platforms/ios/src/CSSFilters.swift b/packages/core/platforms/ios/src/CSSFilters.swift
index 248113cd0e..5ba0f42640 100644
--- a/packages/core/platforms/ios/src/CSSFilters.swift
+++ b/packages/core/platforms/ios/src/CSSFilters.swift
@@ -2,8 +2,6 @@
 //  CSSFilters.swift
 //  NativeScript
 //
-//  Created by Osei Fortune on 17/02/2026.
-//
 
 import UIKit
 import CoreImage