Stack Overflow
Stack Overflow

Questions tagged [box-shadow]

The box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element and allows for shadow rounded corners by border-radius.

The box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners (see Mozilla docs).

Further reference:

  1. W3C reference.
  2. Mozilla reference
393 questions
525
votes
13 answers

How can I add a box-shadow on one side of an element?

I need to create a box-shadow on some block element, but only (for example) on its right side. The way I do it is to wrap the inner element with box-shadow into an outer one with padding-right and overflow:hidden; so the three other sides of the…
tillda
  • 18,150
  • 16
  • 51
  • 70
518
votes
4 answers

CSS Box Shadow Bottom Only

How can I do this? I want my element to look as though it has a shadow underline. I don't want the shadow for the other 3 sides.
WillingLearner
  • 7,106
  • 6
  • 34
  • 51
252
votes
5 answers

Is there a 'box-shadow-color' property?

I have the following CSS: box-shadow: inset 0px 0px 2px #a00; Now I am trying to extract that color to make the page colors 'skinnable'. Is there any way of doing this? Simply removing the color, and then using the same key again later overwrites…
Epaga
  • 38,231
  • 58
  • 157
  • 245
117
votes
15 answers

How to apply box-shadow on all four sides?

I'm trying to apply a box-shadow on all four sides. I could only get it on 2 sides:
dragonfly
  • 3,203
  • 7
  • 30
  • 52
77
votes
5 answers

Correct way to animate box-shadow with jQuery

Which is the correct syntax to animate the box-shadow property with jQuery? $().animate({?:"0 0 5px #666"});
chchrist
  • 18,854
  • 11
  • 48
  • 82
66
votes
5 answers

Creating a UI with box shadow in react native

I am trying to create a UI in react native, the UI contains a box with outer shadow. using the image I have done that, but is there any proper way to do that?
rahulvramesh
  • 759
  • 1
  • 5
  • 7
52
votes
5 answers

CSS3 Box shadow size – percent units?

I'm working on a project that needs to use CSS3 box-shadow property. That's fine, but I have found out that spread size of shadow can't be set to a percentage of parent object. I fully understand that box-shadow is not additive, thus it doesn't take…
Jozko Remen
  • 591
  • 1
  • 5
  • 5
32
votes
8 answers

Adding Shadows at the bottom of a container in flutter?

I have a simple screen with a container about 100 in height and with blue color. I want to add a shadow or elevation at the bottom of the container. This is my code below import 'package:flutter/material.dart'; import…
yoohoo
  • 1,147
  • 4
  • 22
  • 39
31
votes
7 answers

How to only add a shadow on one specific side of a Container?

I am trying to add a shadow to only the right side of of my container widget using the boxShadow parameter in the BoxDecoration widget. new Container( decoration: BoxDecoration( color: Colors.grey.withOpacity(0.5), boxShadow: [ …
countpablo
  • 501
  • 1
  • 5
  • 15
26
votes
3 answers

What is a good way to write CSS for multiple borders?

I am trying to build multiple borders which are getting faded around the user image. I am writing the CSS like this, but this won't help: width: 90px; border-radius: 50%; box-shadow: inset 0 0 0 4px #eee, inset 0 0 0 8px #ddd, inset 0 0 0 12px…
Piyush
  • 3,947
  • 9
  • 36
  • 69
26
votes
8 answers

Calculating shadow values for all Material Design elevations

In the latest Material Design documentation (https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-) an exhaustive set of UI elements are referenced with their respective elevation (z-index in…
Anthony Wijnen
  • 261
  • 1
  • 3
  • 6
20
votes
4 answers

Remove box-shadow from Angular Material

Is there any way to remove the box-shadow from mat-chips in Angular Material? Papadum The chips appear to have a CSS style for the box-shadow, but disabling this style or overriding it…
Daniel Kuhlwein
  • 582
  • 1
  • 4
  • 14
18
votes
4 answers

CSS box-shadow appears only with margin

So, my website has a header and a div containing Revolution Slider immediately after it. I'm trying to add a box-shadow below the header - and above the slider. But it doesn't work, unless I also add margin-bottom to the header - but that renders…
zkvvoob
  • 394
  • 1
  • 4
  • 26
16
votes
2 answers

CSS box-shadow vs outline

I have not been able to find a duplicate and you can find a bunch of blog posts which suggest to use box-shadow for element's focus state instead of outline as it is more flexible in terms of styling and it also follows the border-radius of the…
Anton Kastritskiy
  • 1,248
  • 1
  • 11
  • 23
13
votes
3 answers

CSS custom properties in box-shadow color function render incorrectly in Safari

Is this a Safari bug or am I doing something wrong? Check out this CodePen in Safari vs Chrome and Firefox: https://codepen.io/mattaningram/pen/zWVxzR Or run code snippet below: .item { --itemColor: 200, 0, 0; --itemColorHex: #C80000; …
mattaningram
  • 297
  • 1
  • 5
  • 13
1
2 3
…
26 27