css box-shadowをつけているがボケない件について

Vue.jsで作ったタグをneumorphismにしようと思って、cssでbox-shadowをつけたのですが、ほぼborderのような状態でボケずにこうなってしまった原因がわかりません。原因を教えていただけると嬉しいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta charset="UTF-8">
6	<title>portfolio</title>
7	<link rel="stylesheet" href="css/style.css">
8</head>
9
10<body>
11
12	<div class="home">
13		<header>
14			<img class="aicon" src="img/aicon.png" alt="" width=" 80">
15			<p>sgc_o_ : portfolio</p>
16		</header>
17
18		<div class="creative">
19
20			<!--		タグ---------------------->
21			<div id="dynamic-component" class="demo" >
22				<button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['tab-button', { active: currentTab === tab }]" v-on:click="currentTab = tab">
23					{{ tab }}
24				</button>
25
26				<component v-bind:is="currentTabComponent" class="tab"></component>
27			</div>
28			<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
29
30			<script>
31				Vue.component("tab-all", {
32					template: "<div>all</div>"
33
34				});
35				Vue.component("tab-movie", {
36					template: "<div>movie</div>"
37				});
38				Vue.component("tab-interactive", {
39					template: "<div>interactive</div>"
40				});
41
42
43				new Vue({
44					el: "#dynamic-component",
45					data: {
46						currentTab: "all",
47						tabs: ["all", "movie", "interactive"]
48					},
49					computed: {
50						currentTabComponent: function() {
51							return "tab-" + this.currentTab.toLowerCase();
52						}
53					}
54				});
55			</script>
56
57
58
59		</div>
60
61	</div>
62
63
64</body></html>

Scss
1
2/* RGB */
3$color1: #18A1A5;
4$color2: #333333;
5
6* {
7	background: $color2;
8	margin: 0 0;
9	padding: 0 0;
10	font-family: futura-pt, sans-serif;
11	font-weight: 400;
12	font-style: normal;
13
14}
15
16
17.circle {
18	width: 80px;
19	height: 80px;
20	border-radius: 50%;
21	background: $color2;
22	box-shadow: 7px 7px 10px #232323,
23		-7px -7px 10px #434343;
24}
25
26//アイコン-----------------------------------
27p {
28	color: $color1;
29	font-family: futura-pt, sans-serif;
30	font-weight: 400;
31	font-style: italic;
32	margin-bottom: 20px;
33}
34
35.aicon {
36	z-index: 2;
37}
38
39//ヘッダー-----------------------------------
40
41header {
42	text-align: center;
43}
44
45//タブ-----------------------------------
46
47#dynamic-component {
48	text-align: center;
49}
50
51.tab-button {
52	padding: 6px 17px;
53	cursor: pointer;
54	margin-bottom: -1px;
55	margin-right: 10px;
56
57	border-radius: 10px;
58	background: linear-gradient(145deg, #373737, #2e2e2e);
59	box-shadow: 5px 5px 5px 1px #202020,
60		-5px -5px 5px 1px #464646;
61}
62
63.tab-button:hover {
64	background: #e0e0e0;
65}
66
67.tab-button.active {
68	background: #e0e0e0;
69}
70
71//タブ-all-----------------------------------
72