CSS Box Shadow Around a Custom Shape

CSS box shadow around a custom shape?

Use drop-shadow:

maybe this article (box-shadow-vs-filter-drop-shadow) will help you

Is it possible for an element to have a custom shape and box-shadow at the same time?

You can use filter: drop-shadow which will apply a drop-shadow on the image item as box-shadow will add shadow around the elements frame.

.trapezium-a {
  border-bottom: 100px solid #333;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 100px;
  filter: drop-shadow(0 6px 13px #000);
}

<div class="trapezium-a"></div>

How to add box shadow around the below shape

1. Declare values for the pseudo-element width & height
   properties;
2. purge the borders;
3. then rotate the pseudo-element in question;
4. now apply box-shadow as required;
5. grab a nice cold one;

body{   padding:50px}div{    height: 45px;    width: 209px;    float: left;    color: #fff;    line-height: 45px;    text-align: center;    position: relative;    font-family: Arial;    font-weight: bold;    font-size: 16px;    background-color: #50b3cf;    box-shadow: 0px 0px 5px 3px #000000;}div::after {    position: absolute;    z-index: 2;    content: "";    left: 100%;    width: 32px;    height: 32px;    background: #50b3cf;    transform: rotate(46deg);    transform-origin: 0 0;    box-shadow: 3px -3px 5px 0px #000000;}div::before { /* ver 2.0 Patch */    content: "";    position: absolute;    background: #50b3cf;    top: 0;    bottom: 0;    width: 25px;    right: 0;    z-index: 9;}

<div></div>

Add shadow to custom shape made with border in CSS

You can use unicode character : ▲ to make the triangles.

Apply a text shadow on it.

If the shape of the triangle is not what you want you can adjust it with transform: rotate(); or transform: skewX(); or both.

It's a bit tricky and not perfect but it can works :

span {  display: inline-block;  font-size: 70px;  transform: skewX(29.5deg);  color: red;  text-shadow: 2px 2px 4px gray;}

<span>▲</span>

can we give a shadow to a custom css3 shape

With that CSS

body {
    background: linear-gradient(90deg, lightblue, yellow)
}

.trapezoid {
    left: 87px;
    top: 50px;
    position: absolute;
    height: 100px;
    width: 500px;
}

.trapezoid:before, .trapezoid:after {
    content: '';
    position: absolute;
    width: 65%;
    height: 100%;
    border-color: red;
    border-style: solid;
    border-radius: 10px;
    background-color: lightblue;
    box-shadow: 4px 4px 6px black;
    z-index: -1;
     -webkit-animation: shadow 2s infinite; 
}
.trapezoid:before {
    left: -7%;
    border-width: 3px 0px 3px 3px;
    -webkit-transform: skewX(-20deg);
}

.trapezoid:after {
    right: 0px;
    border-width: 3px 3px 3px 0px;
    -webkit-transform: skewX(20deg);
    clip: rect(-40px, 450px, 220px, 30px);
}

@-webkit-keyframes shadow {
      0% {    box-shadow: 10px 10px 4px  black;}
     25% {    box-shadow: -10px 10px 4px black;}
     50% {    box-shadow: -10px -10px 4px black;}
     75% {    box-shadow: 10px -10px 4px black;}
    100% {    box-shadow: 10px 10px 4px black;}
}

you get this

As a bonus, animated on webkit.

(The shadow is not perfect, specially if you give it blur, but is what you can get with CSS only)

CSS Box shadow custom shape issue

I just added these few lines of code:

.ss_tag3 {
  position:relative;       
  box-shadow:0 1px 0px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}

.ss_tag3:before, .ss_tag3:after {
  content:"";
  position:absolute; 
  z-index:-1;
  box-shadow:0 0 20px rgba(0,0,0,0.4);
  top:50%;
  bottom:0;
  left:40px;
  right:40px;
  border-radius:100px / 10px;
}

The :before and :after parts are the ones that make up the shadow on the bottom. Feel free to fiddle with this one. Code snippet below.

.ss_tag3 {  position: relative;  -webkit-transition: all 200ms ease-in;  -webkit-transform: scale(1);  -ms-transition: all 200ms ease-in;  -ms-transform: scale(1);  -moz-transition: all 200ms ease-in;  -moz-transform: scale(1);  transition: all 200ms ease-in;  transform: scale(0.8);}.ss_tag3 h1{  text-align:center;  }.ss_tag3 .ss_head {  background: #2b557d;  padding: 2% 7% 7%;  position: relative;  box-shadow: 0 3px 3px #bdc3c9;}.ss_tag3 .ss_head:after {  content: '';  border: 28px solid transparent;  position: absolute;  left: 41.5%;  bottom: -42px;  border-top: 15px solid #2b557d;}.ss_tag3 .ss_head h1 {  text-transform: uppercase;  color: #fff;  border-bottom: 1px solid #20476f;  box-shadow: 0 1px 0 #3a6998;  font-weight: 800;  font-size: 32px;  padding-bottom: 7.4%;}.ss_tag3 .ss_head .ss_price {  padding-top: 4%;  padding-right: 0;  padding-left: 0;}.ss_tag3 .ss_head .ss_price .ss_left-div {  text-align: center;}.ss_tag3 .ss_head .ss_price .ss_left-div span {  color: #f7f7f8;  text-transform: capitalize;  font-size: 33px;  font-weight: 100;}.ss_tag3 .ss_list {  background: #fff;  padding: 14% 7% 7%;}.ss_tag3 .ss_list ul {  margin-bottom: 0;  list-style-type: none;}.ss_tag3 .ss_list ul li {  border-bottom: 1px solid #e3e3e3;  padding-bottom: 5%;  padding-top: 4%;}.ss_tag3 .ss_list ul li a {  color: #406387;  font-size: 17px;  font-weight: 600;  padding: 0;}.ss_tag3 .ss_list ul li a .ss_list-style {  padding: 0;}.ss_tag3 .ss_list ul li a .ss_list-style:before {  content: "\2713\0020";  color: #406387;}.ss_tag3 .ss_list ul li a .ss_list-content {  padding: 0;}.ss_tag3 .ss_list ul li a:hover {  text-decoration: none;}.ss_tag3 .ss_list ul li:last-child {  border-bottom: none;}.ss_tag3 .ss_list ul li:last-child a .ss_list-style:before {  display: none;}.ss_tag3 .ss_foot-btn {  text-align: center;  background: #f5f5f5;  padding: 5% 0;}.ss_tag3 .ss_foot-btn .ss_order-btn {  text-transform: uppercase;  background: #2b557d;  border: 1px solid #2b557d;  color: #fff;  font-size: 15px;  font-weight: 600;  padding: 4px 12px;  outline: none;}

.box h3{ text-align:center; position:relative; top:80px;}.box { width:70%; height:200px; background:#FFF; margin:40px auto;}
.ss_tag3{   position:relative;               box-shadow:0 1px 0px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1) inset;}.ss_tag3:before, .ss_tag3:after{ content:"";    position:absolute;     z-index:-1;    box-shadow:0 0 20px rgba(0,0,0,0.4);    top:50%;    bottom:0;    left:40px;    right:40px;    border-radius:100px / 10px;}

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ss_tag3"><div class="ss_head"> <h1>groups or teams</h1> <div class="container-fluid ss_price"><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ss_left-div"><span> special pricing</span> </div> </div></div>   <div class="ss_list"><ul><li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> Contact Sales to ask about special pricing for accounts over 5 people.</span></a></li><li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> sales@AFrameSoftware. com</span></a></li></ul></div><div class="ss_foot-btn"><button type="button" class="btn btn-primary ss_order-btn">contact now</button></div></div>

Add CSS box shadow around the whole DIV

You're offsetting the shadow, so to get it to uniformly surround the box, don't offset it:

-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;

Is it possible to generate a box-shadow that follows the shape of a clip-path polygon?

You can use a filter on the containing div, try:

.container {
   filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.1))
}

eg: https://plnkr.co/edit/kePuv7OLQwawPjiBLg3J?p=preview

---

Related Topics