Centered gradient ellipsis css shadow - css

Question

I need to create a curved, gradient box shadow in the shape of an ellipsis, which needs to be horizontally centered behind a div and offset to the bottom.
This is my markup:
<div class="about-tru">
<div class="container">
<h2 class="text-center heading">Welcome To TruCircles</h2>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-4 text-center"><img src="img/trucircles-img.jpg" alt="trucircles-image" class="img-responsive"></div>
<div class="col-sm-7"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dolor metus, sed feugiat diam finibus vitae. Sed dolor justo, consequat vel vulputate vitae, venenatis efficitur nibh. Vivamus blandit at nulla vel tempor. Nullam sodales nibh lorem, sed elementum lorem imperdiet sed. In in felis feugiat, laoreet nisl sit amet, blandit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum dolor ut ligula ultricies, a ornare mauris interdum. Phasellus sollicitudin urna ac tortor elementum euismod.</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

do you want a shadow of 50% width and in the middle of the div.about-tru, check the fiddle I've created -
http://jsfiddle.net/nw6vzd3L/

Answer 2

Something like this ?
.about-tru{
box-shadow : 0 0 20px;
border-radius: 6px;
margin : 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="about-tru">
<div class="container">
<h2 class="text-center heading">Welcome To TruCircles</h2>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-4 text-center"><img src="http://tododepende.com/wp-content/uploads/2013/09/lorem_ipsum.gif" alt="trucircles-image" class="img-responsive"></div>
<div class="col-sm-7"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dolor metus, sed feugiat diam finibus vitae. Sed dolor justo, consequat vel vulputate vitae, venenatis efficitur nibh. Vivamus blandit at nulla vel tempor. Nullam sodales nibh lorem, sed elementum lorem imperdiet sed. In in felis feugiat, laoreet nisl sit amet, blandit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum dolor ut ligula ultricies, a ornare mauris interdum. Phasellus sollicitudin urna ac tortor elementum euismod.</p>
</div>
</div>
</div>
</div>
</div>

Answer 3

As far as I know you can't make an actual css-shadow in the shape of an ellipsis (which as far as I understand is what you want to achieve).
But you can fake it very well with a gradient background - for example on a pseudo-element:
CSS
.round_shadow {
position: relative;
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 66%);
z-index: -1;
position: absolute;
top: 80%;
right: 10%;
left: 10%;
bottom: -30%;
}
Obviously you can adjust the top, left, right and bottom values to position the shadow wherever you want. Also note that you may need browser-prefixes for the gradient background to work if legacy browser support is an issue.
HTML
<div class="round_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
.round_shadow {
position: relative;
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 66%);
z-index: -1;
position: absolute;
top: 80%;
right: 10%;
left: 10%;
bottom: -30%;
}
<div class="round_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
Edit
Ok, so elliptical was not not desired. To make a rectangular shadow I can think of two solutions, the primary difference between them consists in the options you have for positioning...
The first and probably simplest would be to just use a box-shadow with a negative spread (4th parameter):
.centered_shadow {
border-radius: 5px;
border: 1px solid #f00;
background: #fff;
padding: 1em;
box-shadow: 0 20px 10px -20px rgba(0,0,0,.3);
}
.centered_shadow {
border-radius: 5px;
border: 1px solid #f00;
background: #fff;
padding: 1em;
box-shadow: 0 60px 10px -40px rgba(0, 0, 0, 0.3)
}
<div class="centered_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
The second method is basically the same as my suggestion for an elliptical shadow (which may give better control of the shadows position in some situations), except you give the pseudo-element a shadow instead of a gradient background, so:
.round_shadow {
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
z-index: -1;
position: absolute;
top: 80%;
right: 25%;
left: 25%;
bottom: 0;
border-radius: 10px;
box-shadow: 0 30px 50px rgba(0,0,0,.3);
}
.round_shadow {
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
z-index: -1;
position: absolute;
top: 80%;
right: 25%;
left: 25%;
bottom: 0;
border-radius: 10px;
box-shadow: 0 30px 50px rgba(0,0,0,.3);
}
<div class="round_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>