CSS Shadow Shadows

Question

For practice and pleasure, I try to recreate the following logo in pure CSS in one element.

If you notice, each “bar” has a small gray shaded area that gives it a sense of depth. I would like to create them in pure CSS, if possible. It’s hard for me to understand that they look like they are going to bars above them, so for this you need to be at the level of individual bars to do this, and not apply a mask to everything.

Until now, I could create bars using a pseudo-element and some box shadows and gave B colors using a gradient and background-clip: text .

I usually use a rotating element or mask to apply shadows, but since I created bars using shadow shadows, I don’t know how I, or even if I can, apply them to a separate shadow (technically speaking, they are all one shadow, but I I mean apply it to one bar without closing the others)

That's what i still have

My code

 <div class='B'>B</div> body { background:#FFF8E6; } .B { position:absolute; top:50%; left:50%; margin-top:-150px; line-height:236px; font-size:225pt; font-weight:bold; font-family:'Carrois Gothic SC', sans-serif; background-image:-webkit-gradient(linear, left top, left bottom, color-stop(9%, #FFBF7F), color-stop(9%, #F4A668), color-stop(19.6%, #F4A668), color-stop(19.9%, #F38669), color-stop(28.7%, #F38669), color-stop(29%, #AF9F88), color-stop(49%, #AF9F88), color-stop(49%, #cfb698), color-stop(70%, #cfb698), color-stop(70%, #ecd2b1)); color:transparent; -webkit-background-clip: text; } .B:after { content:''; z-index:-1; position:absolute; left:-387px; height:45px; width:150px; border-radius: 0px 0px 0px 50px; box-shadow: 180px -12px 0 -9pt #FFBF7F, 220px -12px 0 -9pt #FFBF7F, 276px -12px 0 -9pt #FFBF7F, 215px 11px 0 -8pt #F4A668, 220px 11px 0 -8pt #F4A668, 275px 11px 0 -8pt #F4A668, 255px 33px 0 -8pt #F38669, 275px 33px 0 -8pt #F38669, 255px 56px 0 -9pt #898481, 276px 56px 0 -9pt #898481, /* I DON'T KNOW HOW TO FLIP THESE WITHOUT ADDING AN ELEMENT */ 275px 78px 0 -8pt #A4978E, 300px 101px 0 -8pt #B8A28A, /************************************************************/ 250px 90px 0 0px #CABBA8, 190px 45px 0 0px #CCBCAC, 150px 0 0 0px #FCCDA1; } 

Now I don’t think it’s possible, but I am always surprised by the inventiveness that SO users have.

TL, DR How to create these diagonal shadows without adding additional elements? I would be open to alternative ways than the method I use when necessary

EDIT : Here is the final result

Answer 1

Well, I could not leave this question open ...

I could not solve it using your approach. Creating oblique shadows is doable by making it cropped under circular borders, and not (at least I didn't find a way).

Alternative: using a huge number of backgrounds:

 .B:before { content:''; position:absolute; left: -237px; height:135px; width: 258px; background-image: linear-gradient(0deg,#898481,#898481), radial-gradient(circle at bottom right, #898481 22px, transparent 22px), linear-gradient(0deg,#898481,#898481), radial-gradient(circle at bottom right, #898481 22px, transparent 22px), linear-gradient(196deg,rgba(0, 0, 0, 0.97) -21px,transparent 27px), radial-gradient(circle at top right, #ccbcac 44px, transparent 30px), linear-gradient(0deg,#ccbcac,#ccbcac), linear-gradient(0deg,#898481,#898481), radial-gradient(circle at top right, #898481 22px, transparent 22px), linear-gradient(187deg,#B46550 2px,#f38669 24px), radial-gradient(circle at top right, #f38669 22px, transparent 22px), linear-gradient(196deg,rgba(60, 60, 60, 0.97) -21px,transparent 27px), radial-gradient(circle at top right, #ccbcac 44px, transparent 30px), linear-gradient(0deg,#ccbcac,#ccbcac), linear-gradient(190deg,#AC6D3B -11px,#f4a668 28px), radial-gradient(circle at top right, #f4a668 22px, transparent 22px), linear-gradient(0deg,#ffbf7f,#ffbf7f), radial-gradient(circle at top right, #ffbf7f 22px, transparent 22px), radial-gradient(circle at top right, #fccda1 44px, transparent 30px), linear-gradient(0deg,#FCCDA1,#fccda1); background-position: 185px 110px, 163px 110px, 163px 88px, 144px 88px, 106px 88px, 41px 88px, 137px 88px, 142px 66px, 120px 66px, 142px 44px, 120px 44px, 64px 44px,42px 44px, 78px 44px, 97px 22px, 76px 22px, 65px 0px, 43px -1px, 0px 0px, 44px 0px; background-size: 198px 22px, 22px 22px,198px 22px, 22px 22px, 76px 22px, 96px 44px, 200px 44px,198px 22px, 22px 22px,198px 22px, 22px 22px, 96px 44px, 44px 44px, 200px 44px, 198px 22px, 22px 22px, 198px 22px, 22px 22px, 44px 44px, 200px 44px; background-repeat: no-repeat; } 

Most backgrounds are used to reproduce the part of the design that you have already used. To get the shape, you need a rectangular background with a circular on the left.

For shadows, 2 methods are used.

Light is when you have all the shadow contained in a rectangular area. Then you can get it using the same linear gradient, which creates a rectangular area, just giving it a darker shade.

The more difficult are those that cover part of the circle. Here I needed to use another separate background image for the shadow.

result

I just confirmed the result in Chrome.

Of course, this method can be used in the letter:

updated CSS for writing

 .B { position:absolute; top: 200px; left: 300px; margin-top:-150px; line-height:236px; font-size:225pt; font-weight:bold; font-family:'Carrois Gothic SC', sans-serif; background-image: linear-gradient(187deg,#FFBF7F,#FFBF7F), linear-gradient(187deg,#cc8650,#F4A668), linear-gradient(195deg,#B46550,#F38669), linear-gradient(187deg,#8A7668 25px,#AF9F88 35px), linear-gradient(187deg,#af9678,#cfb698), linear-gradient(187deg,#dcc2a1,#ecd2b1); background-position: 0px 0px, 0px 9%, 0px 20%, 0px 30%, 0px 60%, 0px 100%; background-size: 200px 9%, 200px 11%, 200px 10%, 200px 30%, 200px 30%, 200px 30%, 200px 40%; background-repeat: no-repeat; color: transparent; -webkit-background-clip: text; } 

CSS commented backgrounds

 background-image: linear-gradient(0deg,#898481,#898481), /* second small bar in last big bar */ radial-gradient(circle at bottom right, #898481 22px, transparent 22px), linear-gradient(0deg,#898481,#898481), /* first small bar in last big bar */ radial-gradient(circle at bottom right, #898481 22px, transparent 22px), linear-gradient(196deg,rgba(0, 0, 0, 0.97) -21px,transparent 27px), /* shadow */ radial-gradient(circle at top right, #ccbcac 44px, transparent 30px), /* last big bar */ linear-gradient(0deg,#ccbcac,#ccbcac), linear-gradient(0deg,#898481,#898481), /* second small bar in second big bar */ radial-gradient(circle at top right, #898481 22px, transparent 22px), linear-gradient(187deg,#B46550 2px,#f38669 24px), /* first small bar in 2nd big bar (shadowed) */ radial-gradient(circle at top right, #f38669 22px, transparent 22px), linear-gradient(196deg,rgba(60, 60, 60, 0.97) -21px,transparent 27px), /* shadow on second big bar */ radial-gradient(circle at top right, #ccbcac 44px, transparent 30px), /* second big bar */ linear-gradient(0deg,#ccbcac,#ccbcac), linear-gradient(190deg,#AC6D3B -11px,#f4a668 28px), /* second small bar on top (shadowed) */ radial-gradient(circle at top right, #f4a668 22px, transparent 22px), linear-gradient(0deg,#ffbf7f,#ffbf7f), /* first small bar on top */ radial-gradient(circle at top right, #ffbf7f 22px, transparent 22px), radial-gradient(circle at top right, #fccda1 44px, transparent 30px), /* big bar on top */ linear-gradient(0deg,#FCCDA1,#fccda1); 

Not perfect, but you can get some shadow in the circles with another step in the radial gradient:

 radial-gradient(circle at top right, #fccda1 42px, #AC8D70 44px, transparent 45px) 

The limit is that the shadow in this case should be concentric to the border. An alternative would be to set a different background, maybe elliptical.

shadows in circles

Answer 2

I would suggest you split each line into a separate DIV and use the following code to create the desired TEN effect:

 /*================================================== * SHADOW EFFECT * ===============================================*/ .div { position: relative; } .div:after { z-index: -1; position: absolute; content: ""; bottom: 9px; right: 10px; left: auto; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 19px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); } 

It will be really useful to achieve the desired result. You can change it according to your needs and requirements.

Hope this helps you!