diff --git a/projects/addon-charts/components/line-chart/line-chart.style.less b/projects/addon-charts/components/line-chart/line-chart.style.less
index ef7596fe2680..d62bc4694a9b 100644
--- a/projects/addon-charts/components/line-chart/line-chart.style.less
+++ b/projects/addon-charts/components/line-chart/line-chart.style.less
@@ -80,8 +80,8 @@
 }
 
 .t-hint {
-    .shadow();
     position: absolute;
+    box-shadow: var(--tui-shadow);
     font: var(--tui-font-text-xs);
     height: 1.25rem;
     line-height: 1.25rem;
diff --git a/projects/addon-doc/components/demo/demo.style.less b/projects/addon-doc/components/demo/demo.style.less
index 88567a9a087c..835e12e54dd1 100644
--- a/projects/addon-doc/components/demo/demo.style.less
+++ b/projects/addon-doc/components/demo/demo.style.less
@@ -26,7 +26,7 @@
 }
 
 .t-wrapper {
-    .shadow(2);
+    box-shadow: var(--tui-shadow-dropdown);
     display: flex;
     border: 1px solid var(--tui-base-03);
     border-radius: var(--tui-radius-m);
@@ -129,7 +129,7 @@
 }
 
 .t-resizer {
-    .shadow(2);
+    box-shadow: var(--tui-shadow-dropdown);
     position: relative;
     width: 3.5rem;
     min-height: inherit;
diff --git a/projects/addon-doc/components/internal/header/header.style.less b/projects/addon-doc/components/internal/header/header.style.less
index bf2bbaf1786d..1a3afa7cf478 100644
--- a/projects/addon-doc/components/internal/header/header.style.less
+++ b/projects/addon-doc/components/internal/header/header.style.less
@@ -1,7 +1,6 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
-    .shadow(6);
     position: fixed;
     top: 0;
     left: 0;
@@ -9,6 +8,7 @@
     // fix for Safari to prevent tabs underline above sidebar
     z-index: 1;
     display: flex;
+    box-shadow: var(--tui-shadow-navigation);
     height: 3.9375rem;
     align-items: center;
     padding: 0 1.25rem;
diff --git a/projects/addon-mobile/components/pull-to-refresh/loader-android/loader-android.style.less b/projects/addon-mobile/components/pull-to-refresh/loader-android/loader-android.style.less
index 7c9e41030c12..39d5a9e91b48 100644
--- a/projects/addon-mobile/components/pull-to-refresh/loader-android/loader-android.style.less
+++ b/projects/addon-mobile/components/pull-to-refresh/loader-android/loader-android.style.less
@@ -21,11 +21,11 @@
 }
 
 .t-wrapper {
-    .shadow(2);
     position: absolute;
     top: -2.5rem;
     left: 50%;
     display: flex;
+    box-shadow: var(--tui-shadow-dropdown);
     height: 2.25rem;
     width: 2.25rem;
     background-color: var(--tui-secondary);
diff --git a/projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less b/projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less
index e5960a476304..ff97975bca19 100644
--- a/projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less
+++ b/projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less
@@ -36,7 +36,7 @@
 }
 
 .t-sheet {
-    .shadow();
+    box-shadow: var(--tui-shadow);
     width: calc(100% - 1rem);
     border-radius: 0.75rem 0.75rem 0 0;
     padding: 0 1rem;
diff --git a/projects/addon-mobile/components/sheet/components/sheet/sheet.style.less b/projects/addon-mobile/components/sheet/components/sheet/sheet.style.less
index 6b7af7e36570..4f15512d06a2 100644
--- a/projects/addon-mobile/components/sheet/components/sheet/sheet.style.less
+++ b/projects/addon-mobile/components/sheet/components/sheet/sheet.style.less
@@ -49,15 +49,15 @@
     scroll-snap-align: start;
 
     &_shadow {
-        .shadow();
+        box-shadow: var(--tui-shadow);
     }
 }
 
 .t-top {
-    .shadow();
     position: sticky;
     top: 0;
     border-radius: 0.8rem 0.8rem 0 0;
+    box-shadow: var(--tui-shadow);
     transform: scaleX(-1);
     overflow: hidden;
 
diff --git a/projects/addon-tablebars/components/table-bars-host/table-bars-host.style.less b/projects/addon-tablebars/components/table-bars-host/table-bars-host.style.less
index ee5ccedc09a5..af2898a4eba8 100644
--- a/projects/addon-tablebars/components/table-bars-host/table-bars-host.style.less
+++ b/projects/addon-tablebars/components/table-bars-host/table-bars-host.style.less
@@ -16,7 +16,7 @@
 }
 
 .t-bar {
-    .shadow();
+    box-shadow: var(--tui-shadow);
     flex: 0 0 100%;
     background: var(--tui-base-07);
     color: var(--tui-base-01);
diff --git a/projects/core/components/alert/alert.style.less b/projects/core/components/alert/alert.style.less
index f08f7f887648..a1f2c8b05e45 100644
--- a/projects/core/components/alert/alert.style.less
+++ b/projects/core/components/alert/alert.style.less
@@ -1,8 +1,8 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
-    .shadow(2);
     display: block;
+    box-shadow: var(--tui-shadow-dropdown);
     border-radius: var(--tui-radius-l);
     width: 18rem;
 
diff --git a/projects/core/components/dialog/dialog.style.less b/projects/core/components/dialog/dialog.style.less
index 1cc911291713..f3c6f558a8c7 100644
--- a/projects/core/components/dialog/dialog.style.less
+++ b/projects/core/components/dialog/dialog.style.less
@@ -12,10 +12,10 @@
 
     &:after {
         .fullsize();
-        .shadow(3);
         content: '';
         border-radius: inherit;
         pointer-events: none;
+        box-shadow: var(--tui-shadow-modal);
     }
 
     &[data-size='auto'] {
diff --git a/projects/core/directives/dropdown/dropdown.style.less b/projects/core/directives/dropdown/dropdown.style.less
index a04dc8ca4360..d2db11017fb3 100644
--- a/projects/core/directives/dropdown/dropdown.style.less
+++ b/projects/core/directives/dropdown/dropdown.style.less
@@ -1,9 +1,9 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
-    .shadow(2);
     position: absolute;
     display: flex;
+    box-shadow: var(--tui-shadow-dropdown);
     background: var(--tui-elevation-02);
     border-radius: var(--tui-radius-m);
     overflow: hidden;
diff --git a/projects/core/styles/mixins/mixins.less b/projects/core/styles/mixins/mixins.less
index 8a7d34b96141..52c465c2d5bf 100644
--- a/projects/core/styles/mixins/mixins.less
+++ b/projects/core/styles/mixins/mixins.less
@@ -310,14 +310,14 @@
 }
 
 .hoverable-with-shadow() {
-    .shadow();
+    box-shadow: var(--tui-shadow);
     .transition();
     cursor: pointer;
     transition-property: transform, box-shadow;
     will-change: transform, box-shadow;
 
     &:hover {
-        .shadow(5);
+        box-shadow: var(--tui-shadow-hover);
         transform: translateY(-@space);
     }
 }
diff --git a/projects/demo/src/modules/app/landing/landing.style.less b/projects/demo/src/modules/app/landing/landing.style.less
index 4d059a758c83..57018d1b6747 100644
--- a/projects/demo/src/modules/app/landing/landing.style.less
+++ b/projects/demo/src/modules/app/landing/landing.style.less
@@ -236,7 +236,7 @@
 }
 
 .calendar {
-    .shadow(2);
+    box-shadow: var(--tui-shadow-dropdown);
     border-radius: var(--tui-radius-m);
     border: 1px solid var(--tui-base-03);
     margin-top: 0.25rem;
diff --git a/projects/demo/src/modules/components/app-bar/examples/1/index.less b/projects/demo/src/modules/components/app-bar/examples/1/index.less
index f344e53c3d6b..52ba2c7677ac 100644
--- a/projects/demo/src/modules/components/app-bar/examples/1/index.less
+++ b/projects/demo/src/modules/components/app-bar/examples/1/index.less
@@ -1,7 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 tui-app-bar {
-    .shadow(6);
+    box-shadow: var(--tui-shadow-navigation);
     width: 20rem;
     margin-bottom: 1rem;
 }
diff --git a/projects/demo/src/modules/components/avatar/examples/6/index.less b/projects/demo/src/modules/components/avatar/examples/6/index.less
index 4077f8aa4dff..e7969422a645 100644
--- a/projects/demo/src/modules/components/avatar/examples/6/index.less
+++ b/projects/demo/src/modules/components/avatar/examples/6/index.less
@@ -5,12 +5,11 @@
 }
 
 .avatar {
-    .shadow(1);
-
+    box-shadow: var(--tui-shadow);
     background: transparent;
     border: 1px solid;
 
     &:hover {
-        .shadow(5);
+        box-shadow: var(--tui-shadow-hover);
     }
 }
diff --git a/projects/demo/src/modules/components/carousel/examples/2/index.less b/projects/demo/src/modules/components/carousel/examples/2/index.less
index a49daf955f6c..0a536df3a88e 100644
--- a/projects/demo/src/modules/components/carousel/examples/2/index.less
+++ b/projects/demo/src/modules/components/carousel/examples/2/index.less
@@ -8,7 +8,7 @@
     border-radius: 100%;
 
     &_active {
-        .shadow(2);
+        box-shadow: var(--tui-shadow-dropdown);
         transform: scale(1.2);
     }
 }
diff --git a/projects/demo/src/modules/components/push/examples/1/index.less b/projects/demo/src/modules/components/push/examples/1/index.less
index 9b3d58b68fe8..753fe00b9933 100644
--- a/projects/demo/src/modules/components/push/examples/1/index.less
+++ b/projects/demo/src/modules/components/push/examples/1/index.less
@@ -5,7 +5,7 @@
 }
 
 .wrapper {
-    .shadow();
+    box-shadow: var(--tui-shadow);
     width: 22.5rem;
     max-width: 100%;
     border-radius: var(--tui-radius-l);
diff --git a/projects/demo/src/modules/components/tiles/examples/1/index.less b/projects/demo/src/modules/components/tiles/examples/1/index.less
index 8f16aaca77d7..b7c6177ba121 100644
--- a/projects/demo/src/modules/components/tiles/examples/1/index.less
+++ b/projects/demo/src/modules/components/tiles/examples/1/index.less
@@ -28,7 +28,7 @@
     overflow: hidden;
 
     tui-tile._dragged & {
-        .shadow(5);
+        box-shadow: var(--tui-shadow-hover);
     }
 }
 
diff --git a/projects/demo/src/modules/components/tiles/examples/2/index.less b/projects/demo/src/modules/components/tiles/examples/2/index.less
index 39c869b916fd..160d214292f7 100644
--- a/projects/demo/src/modules/components/tiles/examples/2/index.less
+++ b/projects/demo/src/modules/components/tiles/examples/2/index.less
@@ -24,6 +24,6 @@
     cursor: ns-resize;
 
     tui-tile._dragged & {
-        .shadow(5);
+        box-shadow: var(--tui-shadow-hover);
     }
 }
diff --git a/projects/demo/src/modules/customization/portals/examples/1/index.less b/projects/demo/src/modules/customization/portals/examples/1/index.less
index 189f169dbbc0..11a0389c6e0b 100644
--- a/projects/demo/src/modules/customization/portals/examples/1/index.less
+++ b/projects/demo/src/modules/customization/portals/examples/1/index.less
@@ -6,7 +6,7 @@
 }
 
 .template {
-    .shadow();
+    box-shadow: var(--tui-shadow);
     padding: 0.5rem;
     margin: 0.5rem;
     border-radius: 0.25rem;
diff --git a/projects/demo/src/modules/directives/portal/examples/1/index.less b/projects/demo/src/modules/directives/portal/examples/1/index.less
index 384a61d3b416..20b26ef88f95 100644
--- a/projects/demo/src/modules/directives/portal/examples/1/index.less
+++ b/projects/demo/src/modules/directives/portal/examples/1/index.less
@@ -1,7 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 .portal {
-    .shadow(2);
+    box-shadow: var(--tui-shadow-dropdown);
     .center-all();
     position: fixed;
     padding: 1.5rem;
diff --git a/projects/demo/src/modules/experimental/badge/examples/5/index.less b/projects/demo/src/modules/experimental/badge/examples/5/index.less
index 3ef5931f6c58..5fa30535d40a 100644
--- a/projects/demo/src/modules/experimental/badge/examples/5/index.less
+++ b/projects/demo/src/modules/experimental/badge/examples/5/index.less
@@ -2,7 +2,7 @@
 
 .custom-1 {
     .gradient(#0094cf, #24c0ff);
-    .shadow();
+    box-shadow: var(--tui-shadow);
 }
 
 .custom-2 {
diff --git a/projects/demo/src/modules/experimental/surface/examples/1/base.less b/projects/demo/src/modules/experimental/surface/examples/1/base.less
index 0382ea6047d6..3d14b1f31145 100644
--- a/projects/demo/src/modules/experimental/surface/examples/1/base.less
+++ b/projects/demo/src/modules/experimental/surface/examples/1/base.less
@@ -6,7 +6,7 @@
     gap: 1rem;
 
     * {
-        .shadow(1);
+        box-shadow: var(--tui-shadow);
         font-weight: bold;
         text-align: center;
     }
diff --git a/projects/demo/src/modules/experimental/surface/examples/1/index.less b/projects/demo/src/modules/experimental/surface/examples/1/index.less
index 937cf76b1372..b530b4f50f43 100644
--- a/projects/demo/src/modules/experimental/surface/examples/1/index.less
+++ b/projects/demo/src/modules/experimental/surface/examples/1/index.less
@@ -64,5 +64,5 @@
 }
 
 .shadow:hover {
-    .shadow(5);
+    box-shadow: var(--tui-shadow-hover);
 }
diff --git a/projects/demo/src/modules/markup/shadows/shadows.style.less b/projects/demo/src/modules/markup/shadows/shadows.style.less
index 5ddb13bdec00..9c2f3742e3a3 100644
--- a/projects/demo/src/modules/markup/shadows/shadows.style.less
+++ b/projects/demo/src/modules/markup/shadows/shadows.style.less
@@ -1,51 +1,61 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-.example {
+.title {
+    text-align: center;
+}
+
+.examples {
     display: flex;
-    flex: 1;
+    gap: 2.5rem;
     flex-wrap: wrap;
-    padding: 1.25rem;
+    align-items: center;
+    justify-content: center;
 }
 
 .item {
     .transition(box-shadow);
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    margin-top: 2.5rem;
-    margin-left: 2.5rem;
     width: 17.5rem;
     height: 5rem;
+    padding: 0.3125rem;
     border-radius: var(--tui-radius-m);
+    border: 1px solid var(--tui-base-02);
     color: var(--tui-text-03);
     cursor: pointer;
     text-align: center;
 
     &_default {
-        .shadow();
+        box-shadow: var(--tui-shadow);
 
         &:hover {
-            .shadow(5);
+            box-shadow: var(--tui-shadow-hover);
         }
     }
 
     &_dropdown {
-        .shadow(2);
+        box-shadow: var(--tui-shadow-dropdown);
     }
 
     &_modal {
-        .shadow(3);
+        box-shadow: var(--tui-shadow-modal);
     }
 
     &_sidebar {
-        .shadow(4);
+        box-shadow: var(--tui-shadow-sidebar);
     }
 
     &_navigation {
-        .shadow(6);
+        box-shadow: var(--tui-shadow-navigation);
     }
 
     &_mobile {
-        .shadow(7);
+        box-shadow: var(--tui-shadow-sheet);
     }
 }
+
+.code:not(pre code) {
+    color: var(--tui-link);
+}
diff --git a/projects/demo/src/modules/markup/shadows/shadows.template.html b/projects/demo/src/modules/markup/shadows/shadows.template.html
index e215ec60f17a..26a761a76abd 100644
--- a/projects/demo/src/modules/markup/shadows/shadows.template.html
+++ b/projects/demo/src/modules/markup/shadows/shadows.template.html
@@ -1,36 +1,34 @@
 <tui-doc-page header="Shadows">
-    <ng-template pageTab>
-        <p>Different kinds of shadows can be applied with mixin:</p>
-        <div class="example">
-            <div class="item item_default">
-                <span>
-                    Basic shadow:
-                    <code>.shadow(1)</code>
-                    with
-                    <code>.shadow(5)</code>
-                    when hovered
-                </span>
-            </div>
-            <div class="item item_dropdown">
-                Dropdown shadow:
-                <code>.shadow(2)</code>
-            </div>
-            <div class="item item_modal">
-                Modal shadow:
-                <code>.shadow(3)</code>
-            </div>
-            <div class="item item_sidebar">
-                Sidebar shadow:
-                <code>.shadow(4)</code>
-            </div>
-            <div class="item item_navigation">
-                Navigation shadow:
-                <code>.shadow(6)</code>
-            </div>
-            <div class="item item_mobile">
-                Mobile modal shadow:
-                <code>.shadow(7)</code>
-            </div>
+    <p class="title tui-space_bottom-5">Different kinds of shadows can be applied with css variables:</p>
+    <div class="examples">
+        <div class="item item_default">
+            <span>
+                Basic shadow:
+                <code class="code">--tui-shadow</code>
+                with
+                <code class="code">--tui-shadow-hovered</code>
+                when hovered
+            </span>
         </div>
-    </ng-template>
+        <div class="item item_dropdown">
+            Dropdown shadow:
+            <code class="code">--tui-shadow-dropdown</code>
+        </div>
+        <div class="item item_modal">
+            Modal shadow:
+            <code class="code">--tui-shadow-modal</code>
+        </div>
+        <div class="item item_sidebar">
+            Sidebar shadow:
+            <code class="code">--tui-shadow-sidebar</code>
+        </div>
+        <div class="item item_navigation">
+            Navigation shadow:
+            <code class="code">--tui-shadow-navigation</code>
+        </div>
+        <div class="item item_mobile">
+            Mobile modal shadow:
+            <code class="code">--tui-shadow-sheet</code>
+        </div>
+    </div>
 </tui-doc-page>
diff --git a/projects/demo/src/modules/markup/spaces/examples/1/index.style.less b/projects/demo/src/modules/markup/spaces/examples/1/index.style.less
index 1b19e2b28477..0eacdc2a6a2d 100644
--- a/projects/demo/src/modules/markup/spaces/examples/1/index.style.less
+++ b/projects/demo/src/modules/markup/spaces/examples/1/index.style.less
@@ -23,7 +23,7 @@
 
 .example {
     font: var(--tui-font-text-m);
-    .shadow(1);
+    box-shadow: var(--tui-shadow);
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/projects/demo/src/modules/markup/spaces/examples/2/index.style.less b/projects/demo/src/modules/markup/spaces/examples/2/index.style.less
index 27c529739674..d8f1ef02aeff 100644
--- a/projects/demo/src/modules/markup/spaces/examples/2/index.style.less
+++ b/projects/demo/src/modules/markup/spaces/examples/2/index.style.less
@@ -24,7 +24,7 @@
 .example {
     .tui-space(left, 2);
     font: var(--tui-font-text-m);
-    .shadow(3);
+    box-shadow: var(--tui-shadow-modal);
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/projects/experimental/directives/surface/surface.style.less b/projects/experimental/directives/surface/surface.style.less
index 4e219d5e0d52..9a41aa196e7d 100644
--- a/projects/experimental/directives/surface/surface.style.less
+++ b/projects/experimental/directives/surface/surface.style.less
@@ -122,7 +122,7 @@ input[tuiSurfaceLayer] {
 }
 
 [data-surface='elevated'] {
-    .shadow();
+    box-shadow: var(--tui-shadow);
     border-radius: var(--tui-radius-xl);
     background: var(--tui-elevation-01);
 }
@@ -130,13 +130,13 @@ input[tuiSurfaceLayer] {
 button[data-surface='elevated'],
 a[data-surface='elevated'] {
     &:active {
-        .shadow();
+        box-shadow: var(--tui-shadow);
         transform: scale(0.95);
     }
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            .shadow(5);
+            box-shadow: var(--tui-shadow-hover);
             transform: translate3d(0, -0.25rem, 0);
         }
     }
diff --git a/projects/kit/components/files/files.component.less b/projects/kit/components/files/files.component.less
index 69acd44d83e0..e95c56682e6b 100644
--- a/projects/kit/components/files/files.component.less
+++ b/projects/kit/components/files/files.component.less
@@ -18,7 +18,7 @@ tui-files {
         background: var(--tui-base-01);
 
         &_collapsed {
-            .shadow(3);
+            box-shadow: var(--tui-shadow-modal);
             margin-top: -1.5rem;
         }
     }
diff --git a/projects/kit/components/line-clamp/line-clamp-box.style.less b/projects/kit/components/line-clamp/line-clamp-box.style.less
index 5e4674764211..e8107ab3b3d8 100644
--- a/projects/kit/components/line-clamp/line-clamp-box.style.less
+++ b/projects/kit/components/line-clamp/line-clamp-box.style.less
@@ -1,8 +1,8 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
-    .shadow(2);
     position: absolute;
+    box-shadow: var(--tui-shadow-dropdown);
     width: min-content;
     padding: 0.75rem 1rem;
     margin-left: calc(-1px - 1rem);
diff --git a/projects/kit/components/push/push.style.less b/projects/kit/components/push/push.style.less
index fa450bc519aa..a4394e892b8e 100644
--- a/projects/kit/components/push/push.style.less
+++ b/projects/kit/components/push/push.style.less
@@ -1,7 +1,6 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
-    .shadow();
     position: relative;
     display: block;
     width: 22.5rem;
@@ -12,6 +11,7 @@
     font: var(--tui-font-text-m);
     border-radius: var(--tui-radius-xl);
     background: var(--tui-elevation-02);
+    box-shadow: var(--tui-shadow);
 }
 
 .t-image {