I am trying to figure out how to make a large div centered on all screens, but also be scrollable for smaller screens that otherwise couldn't see all of the div.
For example, let's say the div has the size of 1200px x 600px. Using the following will center the div, but not allow scrolling on smaller screen sizes:
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
My goal is to find a way to allow these smaller computer screens to see the entirety of the large div (via scrolling) but still have the div be centered on screens of all sizes.
Is this possible? In addition, is there a non-javascript solution?
I hope it will solve your problem.
.main-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
height: auto;
padding: 20px;
background: red;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
</head>
<body>
<div class="main-wrapper">
<div class="internal-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perspiciatis. Assumenda cupiditate culpa obcaecati molestias architecto facilis! Ratione laboriosam reprehenderit asperiores et ipsum est, quisquam modi beatae odio enim nostrum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet libero nam nulla assumenda optio iure adipisci, exercitationem deserunt a. Similique illum cumque eveniet quam enim in provident expedita culpa officia! Lorem ipsum dolor sit amet consectetur adipisicing, elit. Cupiditate ipsam et, nostrum. Dolorum autem qui voluptas doloribus voluptatibus est laboriosam perferendis blanditiis et quaerat iusto, vitae unde itaque dolore nulla.. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem recusandae, repellat velit rerum. Repellendus harum, sequi architecto deleniti tenetur cumque, ducimus itaque, nam officia vero minima quos, debitis quis sunt. Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Architecto, quaerat, illum. Aperiam, repellendus sit atque architecto cupiditate. Quis consequuntur, iure nihil doloremque, aut distinctio quibusdam rem, mollitia incidunt, voluptate quasi?
</div>
</div>
</body>
</html>
Related
Left side there is a menu, right side the content.
A flex box is used. Why menu scroll, if I scroll in right side? Why it is not keep fixed? How can I fix it?
CSS is inline in React.js.
const DashboardLayout = ({ children }: Props) => {
const isDesktop = useMediaQuery('(min-width: 575px)')
return (
<Layout isNavbarTransparent={false}>
<section className={`section-base`}>
<div style={{ display: 'flex' }}>
{isDesktop ? (
<>
<div style={{ flexBasis: '350px' }}>
<DashboardSidebar embeddedIn={'dashboard'} />
</div>
<div>{children}</div>
</>
) : (
<div>{children}</div>
)}
</div>
</section>
</Layout>
)
}
I tried to set this for right content:
overflow: hidden;
height: 100px;
Did not help.
You can use position: sticky; to make it work. Attached a working example (no React but the concept is there). See this for further information.
Note: There may be various solution to this depending what you want to get, this answer was made with the context you provide. Hope it helps!
.top-bar {
width: 100%;
height: 40px;
background-color: black;
}
.dashboard {
display: flex;
width: 100%;
}
.menu {
width: 30%;
margin: 20px;
}
.sticky-container {
position: sticky;
top: 0; /* set top for sticky to work */
padding-top: 10px;
}
.content {
width: 70%;
}
<div>
<div class="top-bar"></div>
<div class="dashboard">
<div class="menu">
<div class="sticky-container">
<li>Options</li>
<li>Options</li>
<li>Options</li>
<li>Options</li>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
</div>
</div>
</div>
Solution:
overflow: scroll;
height: calc(100vh - 64px);
I have div container which holds two elements,
one contain text and the other one contains a picture
i want the height of my picture to resize based on its sibling container which holds text
for instance , if my text container's height is 500px, the height of my picture's container resize to 500px without losing its aspect ratio
You can use the type of implementation I have added here.
Make the image height: 100%; and object-fit: cover; to fix the aspect ratio.
body {
max-width: 780px;
margin: auto;
}
img {
max-width: 100%;
}
.parent {
display: flex;
flex-wrap: wrap ;
}
.child {
flex: 0 0 50%;
}
.child img {
height: 100%;
object-fit: cover;
}
<div class="parent">
<div class="child">
<img src="https://images.pexels.com/photos/12004363/pexels-photo-12004363.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
</div>
<div class="child">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas ipsam eveniet cupiditate recusandae, ratione tenetur suscipit, quia est vel quasi, a ex maxime! Reiciendis quae delectus cum praesentium. Aliquid, necessitatibus?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas ipsam eveniet cupiditate recusandae, ratione tenetur suscipit, quia est vel quasi, a ex maxime! Reiciendis quae delectus cum praesentium. Aliquid, necessitatibus?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas ipsam eveniet cupiditate recusandae, ratione tenetur suscipit, quia est vel quasi, a ex maxime! Reiciendis quae delectus cum praesentium. Aliquid, necessitatibus?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas ipsam eveniet cupiditate recusandae, ratione tenetur suscipit, quia est vel quasi, a ex maxime! Reiciendis quae delectus cum praesentium. Aliquid, necessitatibus?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas ipsam eveniet cupiditate recusandae, ratione tenetur suscipit, quia est vel quasi, a ex maxime! Reiciendis quae delectus cum praesentium. Aliquid, necessitatibus?
</p>
</div>
</div>
I need a create 4 cards with non-changable height with buttons on the bottom, but there are different text amount in each card.
Position Fixed is connected to body element,
position absolute scrolls with content,
position sticky appears when content ends.
https://codepen.io/anatoli101/pen/NVzbGY Here is a basic exemple of my problem
.content{
display:flex;
width: 100%;
justify-content: space-around;
}
.fixed-div{
background-color: red;
height: 400px;
width: 300px;
overflow-y: auto;
}
.button{
position:sticky;
bottom:0;
background-color: grey;
width: 100%;
height: 30px;
}
You'll get a much nicer result (no occluded scrollbars) using flex:
.content {
display: flex;
justify-content: space-evenly;
height: 400px;
}
.container {
display: flex;
flex-direction: column;
flex: 0 1 250px;
margin: 0 5px;
}
.fixed-div {
background-color: red;
overflow-y: auto;
flex: 1 1 auto;
}
.button {
background-color: grey;
flex: 0 0 30px;
}
<h1>I need grey area fixed on the bottom, not dependent on text amount</h1>
<div class="content">
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est </p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
</div>
A good way to achieve this is by wrapping the element with the class fixed-div inside a container, and moving the element with the class button outside of the element with the class fixed-div, so that it is the direct child of the container element. Then you can set position: relative to the container element, and position: absolute to the element with the class button. As the container element will have the exact same size (and especially the same height) as the element with the class fixed-div, the element with the class button will be positioned at its bottom.
You also will need to add a bottom padding to the element with the class fixed-div so that the button doesn't not hide its content, and so that it doesn't affect its defined height, you can set its box-sizing property to border-box.
See the following code:
.content {
display: flex;
width: 100%;
justify-content: space-around;
}
.container {
position: relative;
}
.fixed-div {
box-sizing: border-box;
width: 150px;
height: 400px;
padding-bottom: 30px;
overflow-y: auto;
background-color: red;
}
.button {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: grey;
}
<h1>I need grey area fixed on the bottom, non depending of text amount </h1>
<div class="content">
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum.</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae? </p>
</div>
<div class="button"></div>
</div>
</div>
I reduced the width of the text elements so that it works within a narrow container, you can run the code in full page if it is still too narrow.
Leaving the button inside the scrolling element and setting position: relative to the latter and position: absolute to the former wouldn't work as the bottom of the button would be positioned inside the scrolling element at 400px which is the height of the scrolling element, and would scroll with its content.
Hope that helps.
You can try code:
.fixed-div p{
display: block;
margin: 0;
padding: 10px;
height: 350px;
}
This is a demo: https://codepen.io/phuongnm153/pen/zQaobq
use position: relative; for the parent (fixed-div) and position:absolute;bottom:0; for the child (button)
.content{
display:flex;
width: 100%;
justify-content: space-around;
}
.fixed-div{
position: relative;
background-color: green;
height: 400px;
width: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.button{
position:relative;
background-color: grey;
width: 100%;
height: 30px;
display: inline-table;
}
I am learning CSSGrid and I require that in a responsive view the widgets are aligned to the center but I can not do it.
This is my code:
grid-template-areas: "header header header"
"contenido contenido sidebar"
"widget-1 widget-2 sidebar"
"footer footer footer";
.contenedor .sidebar {
/* grid-column: 3/4; */
background: #faa43d;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
/* grid-row: span 2; */
min-height: 100px;
grid-area: sidebar;
}
.contenedor .widget-1,
.contenedor .widget-2 {
background: #55a8fd;
color: white;
height: 100px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.contenedor .widget-1 {
grid-area: widget-1;
}
.contenedor .widget-2 {
grid-area: widget-2;
}
I use media query for the responsive view where I indicate the "contenido" class occupies 3 columns and the sidebar also but the problem is that the widget uses 2 columns so it does not occupy the 3 columns of my Grid. I can solve it by using a point in the media query in the area of the widget.
But I do not know how to center them since the point occupies a space that would be the 3rd so it does not allow me to center them
#media screen and (max-width: 768px){
.contenedor {
grid-template-areas:
"header header header"
"contenido contenido contenido"
"sidebar sidebar sidebar"
"widget-1 widget-2 ."
"footer footer footer";
}
}
Attached image of how it looks when the media query comes in. Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Layout CSS-GRID</title>
</head>
<body>
<div class="contenedor">
<header class="header">
<h2>HEADER</h2>
</header>
<main class="contenido">
<h1>Contenido</h1>
<p>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
<br><br>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
<br><br>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
</p>
</main>
<aside class="sidebar">
<h3>Sidebar</h3>
</aside>
<div class="widget-1">
<h3>Widget 1</h3>
</div>
<div class="widget-2">
<h3>Widget 2</h3>
</div>
<footer class="footer">
<h3>FOOTER</h3>
</footer>
</div>
</body>
</html>
How can I make white inner shadow in the div?
I've trying with other colors — works fine, but with white color that don't work.
JSBin example
Thanks!
Update:
I need something like this:
Alternatively, you can create a simple overlay on the layer above the content and make it your box-shadow
.container {
height: 300px;
width: 300px;
background: #fff;
border: 1px solid #cecece;
border-radius: 4px;
position: relative;
}
.container .content {
overflow: auto;
height: 100%;
}
.container:after {
width: calc(100% - 20px);
height: 110px;
background: linear-gradient(180deg, #fff, transparent);
position: absolute;
top: 0;
left: 0;
content: close-quote;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro nesciunt quo fuga quasi vero modi aspernatur
nemo harum sapiente nobis ex aliquam excepturi possimus sit laboriosam libero adipisci non aliquid.Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Dicta libero modi debitis ipsa architecto nihil
exercitationem cumque natus ducimus at quae doloribus illum optio aut expedita eveniet magnam officiis
qui!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam officia reiciendis doloremque neque
debitis aperiam voluptates non libero atque ut iure rem consequuntur alias commodi velit asperiores sit
nesciunt minima. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolor ab animi ullam id
incidunt tempore atque doloremque quidem quaerat soluta eaque expedita aspernatur velit reprehenderit
doloribus similique. Quod non.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit delectus iste
aliquid vero ut? Odio quas asperiores odit velit vitae aspernatur beatae! Adipisci molestias placeat maiores
eos voluptatum assumenda sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci similique
quos fugit nostrum neque sit repudiandae error laborum possimus voluptatum molestiae impedit quo repellendus
minus corrupti doloribus itaque ipsa consequatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consequuntur molestias odit numquam soluta veniam saepe incidunt dolore praesentium nobis labore amet cumque
aliquam et consectetur est at quis voluptas doloremque?
</div>
</div>
</body>
</html>
box-shadow: grey 0px 30px 40px -2em inset;
Use grey into white.
If I understood well, you want a white shadow inside a white input? You need a different color to make the shadow.
I have maybe misunderstood, don't know. Tell me if this helped or if I just didn't understand.