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
4
votes
2 answers

Box-shadow affects scale performance

I am using transform:scale css property to scale an array of image and measure the performance in fps. After measuring the performance, it was very slow. The result was only 20fps. After reading some tips on how to improve performance. Mostly they…
Ronz
  • 41
  • 1
  • 6
4
votes
1 answer

Strange Box-shadow bug on Chrome 51 while scrolling

So while making a website I discovered a strange box-shadow bug on Chrome 51, my website has a fixed header with a box-shadow, and when I scroll up or down the box-shadow leaves some marks (horizontal gray lines) : Also I can't reproduce this bug…
Pascal Goldbach
  • 977
  • 1
  • 15
  • 34
4
votes
2 answers

Box-shadow is Black in Chrome but White in Firefox?

Actually the problem is simple, my shadow is black in Google Chrome and white in Firefox, It should be black. And if you have different comments please do say them because I'm still a student. This is my HTML code: (it is dutch but it is just so…
Dries Jans
  • 107
  • 1
  • 11
4
votes
2 answers

Remove the box shadow from the bottom of a div?

I'm having trouble formatting my footer because the box shadow from the main content div is going over it and making it look terrible. I have looked through some other sources with people having a similar problem to me and have tried a few…
Aaron
  • 103
  • 1
  • 2
  • 8
4
votes
2 answers

Only CSS rotate box-shadow without original element

I have a small problem, I want to create 45 degree shadow for a picture. But if I use my code my object is rotating too. So I would like to ask for help with this problem. My code: .item { box-shadow: -50px 80px 4px 10px #555; …
Tomas
  • 67
  • 1
  • 1
  • 8
4
votes
2 answers

Box shadow on adjacent elements with variable width

I'm trying to add a box shadow on two elements, each with variable width. My desired result looks like this: I've been trying to get to this result with a pseudo element covering the overlapping box shadows, but because they need to have…
Matthias
  • 737
  • 8
  • 14
4
votes
2 answers

box-shadow for inline element

A multiline text is positioned on an image. The text should appear on a white background like taped. Each line of the text needs a small padding at the left and right side. This can be achieved with a box-shadow for the inline text. div.slide { …
pabo
  • 808
  • 7
  • 14
4
votes
1 answer

Inset box-shadow not following the curve

ISSUE FIDDLE 1 This is the fiddle in question : Fiddle 1 #one { height: 200px; width: 200px; border-radius: 100% 0 0 0; background-color: plum; box-shadow: inset 40px 40px 0 0 red, inset 80px 80px 0 0 blue, inset 120px…
Max Payne
  • 2,423
  • 17
  • 32
4
votes
2 answers

Box-shadow doesn't fit element's sides

Note: don't focus on the purpose of this code, it's only a minimalist example to highlight the issue encoutered. When I'm using the box-shadow property, it sometimes doesn't fit the element's sides, resulting by a 1px (or less) margin between the…
zessx
  • 68,042
  • 28
  • 135
  • 158
3
votes
1 answer

Shadow appear on the right of a sticky table column when scrolling

I currently achieve the look of the first image here by applying border-collapse: separate to the table and border-right: dashed 1px #dddddd as well as position: sticky and left: 0 to the td: When scrolling horizontally, is there a pure CSS way of…
Sammy
  • 3,395
  • 7
  • 49
  • 95
3
votes
2 answers

CSS box shadow on table row not displaying correctly

I have added a slight box shadow to a table row when it is being hovered on so that it is a bit more apparent. It works as it should, but when I add alternating row colors, it stops displaying correctly. Here is a JSFiddle of the problem.
Haus
  • 1,492
  • 7
  • 23
3
votes
2 answers

How to add a box shadow to a css generated arrow?

I'm having difficulty adding a box shadow around the outline of the arrow that was generated using border properties. Is there a way to make the box shadow in the shape the same as the arrow instead of a square box? Here's a jsfiddle. HTML:
TheAmazingKnight
  • 2,442
  • 9
  • 49
  • 77
3
votes
2 answers

How to create a box shadow that is just an outline?

How would I be able to create something like the link above with html and css? Every time I try to make it into a thin line like (box-shadow: 10px 10px 1px #FFE600;) it disappears. Would I just need to create a separate div for this? Here's my…
Johanna Lim
  • 33
  • 4
3
votes
2 answers

How do you remove extra whitespace on the top of an input checkbox with custom box-shadow (Chrome 68)?

See image and jsfiddle below. It seems to have to do with the increase in font-size. Is there an alternative way to increase the size of the checkbox while maintaining a custom surrounding box-shadow on Chrome (68)? I've tried a few things. See:…
Niles Turner
  • 300
  • 1
  • 15
3
votes
0 answers

how to add BoxShadow at the bottom of the MapView in react-native for both ios and android?

I want to achieve as image has attached below at the end. Most of the help is for View element but I need it in MapView. I tried everything in this link below but none of them works in MapView How do I render a shadow? and I am using expo here is my…
M.Umer
  • 71
  • 4
1 2 3
…
26 27