diff --git a/integration_tests/snapshots/css/css-overflow/overflow-clip.ts.2d7ac4b11.png b/integration_tests/snapshots/css/css-overflow/overflow-clip.ts.2d7ac4b11.png
new file mode 100644
index 0000000000..7e39631ecd
Binary files /dev/null and b/integration_tests/snapshots/css/css-overflow/overflow-clip.ts.2d7ac4b11.png differ
diff --git a/integration_tests/snapshots/css/css-overflow/overflow-clip.ts.d735f98a1.png b/integration_tests/snapshots/css/css-overflow/overflow-clip.ts.d735f98a1.png
new file mode 100644
index 0000000000..7e39631ecd
Binary files /dev/null and b/integration_tests/snapshots/css/css-overflow/overflow-clip.ts.d735f98a1.png differ
diff --git a/integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.480408a41.png b/integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.480408a41.png
new file mode 100644
index 0000000000..7e39631ecd
Binary files /dev/null and b/integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.480408a41.png differ
diff --git a/integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.c79d92a81.png b/integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.c79d92a81.png
new file mode 100644
index 0000000000..7e39631ecd
Binary files /dev/null and b/integration_tests/snapshots/css/css-overflow/overflow-hidden.ts.c79d92a81.png differ
diff --git a/integration_tests/specs/css/css-overflow/overflow-clip.ts b/integration_tests/specs/css/css-overflow/overflow-clip.ts
new file mode 100644
index 0000000000..dce4c9213e
--- /dev/null
+++ b/integration_tests/specs/css/css-overflow/overflow-clip.ts
@@ -0,0 +1,43 @@
+describe('clip', () => {
+  it('should works with basic', async () => {
+    let image;
+    let container = createElement('div', {
+      style: {
+        width: '80px',
+        height: '80px',
+        borderRadius: '10px',
+        overflow: "clip",
+      }
+    }, [
+      (image = createElement('img', {
+          src: 'assets/100x100-green.png',
+      })) 
+    ]);
+  
+    document.body.appendChild(container);
+  
+    await snapshot(0.1);
+  });
+
+  it('should works with children of appear event', async () => {
+    let image;
+    let container = createElement('div', {
+      style: {
+        width: '80px',
+        height: '80px',
+        borderRadius: '10px',
+        overflow: "clip",
+      }
+    }, [
+      (image = createElement('img', {
+          src: 'assets/100x100-green.png',
+      })) 
+    ]);
+  
+    image.addEventListener('appear', function onAppear() {});
+  
+    document.body.appendChild(container);
+  
+    await snapshot(0.1);
+  });
+});
diff --git a/integration_tests/specs/css/css-overflow/overflow-hidden.ts b/integration_tests/specs/css/css-overflow/overflow-hidden.ts
new file mode 100644
index 0000000000..86725d0e3a
--- /dev/null
+++ b/integration_tests/specs/css/css-overflow/overflow-hidden.ts
@@ -0,0 +1,43 @@
+describe('hidden', () => {
+  it('should works with basic', async () => {
+    let image;
+    let container = createElement('div', {
+      style: {
+        width: '80px',
+        height: '80px',
+        borderRadius: '10px',
+        overflow: "hidden",
+      }
+    }, [
+      (image = createElement('img', {
+          src: 'assets/100x100-green.png',
+      })) 
+    ]);
+  
+    document.body.appendChild(container);
+  
+    await snapshot(0.1);
+  });
+
+  it('should works with children of appear event', async () => {
+    let image;
+    let container = createElement('div', {
+      style: {
+        width: '80px',
+        height: '80px',
+        borderRadius: '10px',
+        overflow: "hidden",
+      }
+    }, [
+      (image = createElement('img', {
+          src: 'assets/100x100-green.png',
+      })) 
+    ]);
+  
+    image.addEventListener('appear', function onAppear() {});
+  
+    document.body.appendChild(container);
+  
+    await snapshot(0.1);
+  });
+});
diff --git a/kraken/lib/src/css/overflow.dart b/kraken/lib/src/css/overflow.dart
index 6efe526bbb..c939d4fc6b 100644
--- a/kraken/lib/src/css/overflow.dart
+++ b/kraken/lib/src/css/overflow.dart
@@ -45,6 +45,8 @@ CSSOverflowType _getOverflowType(String definition) {
       return CSSOverflowType.scroll;
     case AUTO:
       return CSSOverflowType.auto;
+    case CLIP:
+      return CSSOverflowType.clip;
     case VISIBLE:
     default:
       return CSSOverflowType.visible;
diff --git a/kraken/lib/src/css/values/keywords.dart b/kraken/lib/src/css/values/keywords.dart
index 3713fe2440..cfaca97239 100644
--- a/kraken/lib/src/css/values/keywords.dart
+++ b/kraken/lib/src/css/values/keywords.dart
@@ -13,6 +13,9 @@ const String AUTO = 'auto';
 const String VISIBLE = 'visible';
 const String HIDDEN = 'hidden';
 
+// Overflow
+const String CLIP = 'clip';
+
 // Border
 const String SOLID = 'solid';
 const String THIN = 'thin'; // A thin border.
diff --git a/kraken/lib/src/gesture/scrollable.dart b/kraken/lib/src/gesture/scrollable.dart
index abaae07d17..3f13ecb11e 100644
--- a/kraken/lib/src/gesture/scrollable.dart
+++ b/kraken/lib/src/gesture/scrollable.dart
@@ -381,6 +381,11 @@ mixin RenderOverflowMixin on RenderBox {
       PaintingContextCallback painter = (PaintingContext context, Offset offset) {
         callback(context, offset + paintOffset);
       };
+
+      // It needs to create new layer to clip children in case children has its own layer
+      // for all overflow value which is not visible (auto/scroll/hidden/clip).
+      bool _needsCompositing = true;
+
       if (decoration != null && decoration.borderRadius != null) {
         BorderRadius radius = decoration.borderRadius as BorderRadius;
         RRect clipRRect = RRect.fromRectAndCorners(clipRect,
@@ -389,9 +394,9 @@ mixin RenderOverflowMixin on RenderBox {
             bottomLeft: radius.bottomLeft,
             bottomRight: radius.bottomRight
         );
-        _oldClipRRectLayer = context.pushClipRRect(needsCompositing, offset, clipRect, clipRRect, painter, oldLayer: _oldClipRRectLayer);
+        _oldClipRRectLayer = context.pushClipRRect(_needsCompositing, offset, clipRect, clipRRect, painter, oldLayer: _oldClipRRectLayer);
       } else {
-        _oldClipRectLayer = context.pushClipRect(needsCompositing, offset, clipRect, painter, oldLayer: _oldClipRectLayer);
+        _oldClipRectLayer = context.pushClipRect(_needsCompositing, offset, clipRect, painter, oldLayer: _oldClipRectLayer);
       }
     } else {
       _oldClipRRectLayer = null;