Shadow between two divisions in the CSS - css

Question

I am creating a site in order to monitor employees, and there are many interfaces within the site, and from these interfaces there is an interface to add a project, which is the interface shown in the image and as shown in the image there are two sections in the interface, the first part is colored in white and the second section is colored in blue.
How can I create shadow between the two sections?
<template>
<v-app>
<div class="mainPage">
<!-- right section -->
<div class="split left">
<div class="left_body_content">
<div class="left-body-content_logo">
<img class="logo" src="../../../../src/assets/logo_base.png" />
</div>
<div class="left-body-content_illustrationImage">
<v-img src="../../../../src/assets/create.svg"></v-img>
</div>
</div>
</div>
<div class="split-1 right">
<div class="right_body_content">
<div class="right_body_content_text">
<div class="text">
<h1>Create project</h1>
</div>
</div>
<div class="right_body_content_field">
<v-text-field
label="Project Name"
v-model="project_Name"
color="#5f48ea "
class="field"
>{{ project_Name }}
</v-text-field
>
</div>
<div class="right_body_content_button">
</div>
</div>
</div>
</div>
</v-app>
</template>
<style scoped>
.mainPage {
justify-content: flex-start;
align-items: flex-start;
position: relative;
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.split {
height: 100%;
width: 66%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
}
.left_body_content {
display: flex;
width: 100%;
}
.left {
left: 0;
background-color: #fff;
}
.left-body-content_logo {
display: flex;
width: 18%;
padding-left: 2rem;
}
.logo {
display: flex;
width: 100%;
z-index: -1;
}
.left-body-content_illustrationImage {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
background-size: cover;
background-position: center;
z-index: -1;
width: 90%;
height: 100%;
position: absolute;
padding-top: 7rem;
padding-left: 5rem;
}
.split-1 {
height: 100%;
width: 34%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 2rem;
}
.right_body_content {
display: flex;
width: 100%;
height: 100%;
}
.right_body_content_text {
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
width: 90%;
height: 50%;
padding-left: 2rem;
}
.text {
display: flex;
font-family: Aviliator;
color: #5f48ea;
}
.right_body_content_field{
display: flex;
justify-content: flex-start;
align-items: center;
position: fixed;
width: 25%;
height: 100%;
padding-left: 2.5rem;
}
.field{
display: flex;
width: 40%;
height: 30%;
}
.right {
right: 0;
background-color: blue;
}
</style>

Answer 1

Add class shadow to the div having class split-1 and define shadow class in styles as
.shadow{
-webkit-box-shadow: -3px 0px 0px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2,
-moz-box-shadow: -3px 0px 0px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: -3px 0px 0px #ccc; /* IE 9, Firefox 4+, Chrome 6+ */
}
this will add a shadow of 3px to the left of the div with class shadow
You can read more about box-shadow here - https://css-tricks.com/almanac/properties/b/box-shadow/

Answer 2

Here I have created two div's
and for shadow using:
box-shadow: /* offset-x | offset-y | blur-radius | spread-radius | color */
.first {
background-color: rgba(0, 0, 0, 0);
width: 500px;
height: 100px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
margin: 5px;
}
.second {
background-color: rgba(0, 0, 255, 1);
width: 500px;
height: 100px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
<div>
<div class="first">
</div>
<div class="second">
</div>
</div>