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
6
votes
1 answer

Firefox box shadow much lighter in latest build

I'm finding that Firefox (44.0.2) is rendering the box-shadow CSS very faint / light. If you compare the difference between Chrome and Firefox it looks a lot lighter in Firefox. https://jsfiddle.net/8db8zr6q/ I was wondering if anyone has come…
user1788364
  • 1,141
  • 3
  • 19
  • 33
6
votes
3 answers

How do i remove the top box-shadow of a dropdown-menu in CSS?

I need help. How do i remove the top box-shadow in css? Here is a image: https://picr.ws/images/b004e226b4eeb5616aa9d0bfdcb61b95.png I have here a live-demo: www.hobbu.org and here some snippets: html
5
votes
1 answer

Safari cuts off box-shadow of element inside button

I have a button with an element inside it that receives box-shadow: button { padding: 0; border: 0; margin: 0; overflow: visible; -webkit-appearance: none; background: white; } .shadow { display: inline-block; …
M. Aho
  • 318
  • 2
  • 7
5
votes
1 answer

How to add inner shadow to image in CSS

I'm trying to add an inner shadow to an image, but I can't get the result that I want. Here's what I have currently: https://codepen.io/nvision/pen/lBKEy .shadow { display: inline-block; position: relative; -webkit-border-radius: 50%; …
Herbot Sikaro
  • 189
  • 2
  • 3
  • 9
5
votes
2 answers

Why does box-shadow not work?

I have to write a website for school and I want to use box-shadow in CSS but it doesn't work. There is not a shadow. I want to have the shadow under the header div box html DABA - Videoverleih
Grevak
  • 533
  • 5
  • 17
5
votes
1 answer

How can I scale a div without scaling its casted box-shadow in a performant way?

I'm using a transform scaleY animation on a div, to animate its hegiht cheaply, but it doesn't work very well when there is a box-shadow applied to it. div { width: 300px; height: 100px; transform: scaleY(1); transition: all…
doplumi
  • 2,938
  • 4
  • 29
  • 45
5
votes
1 answer

How to have two elements share a box shadow

So I'm in a tricky situation: I have outer div wrapper that contains an inner div and a ul like so:
    ...
The #list has to be absolutely positioned to be right underneath #box…
rcplusplus
  • 2,767
  • 5
  • 29
  • 43
5
votes
2 answers

How to fill the first square with box-shadow trick?

I was experimenting with some box-shadow tricks, I cannot fill the first square (0 0 [color]). Best explained with followed sample: .box { width: 90px; position: relative; display: inline-block; } .box:before { content: ''; width:…
user4431269
5
votes
3 answers

Incorrect stack with box-shadow and transform

I have created a shape which represents a page with a shadow that gets bigger towards the bottom. body { background: #dddddd; } div { background: white; margin: 40px auto; height: 300px; width: 300px; position: relative; …
Stewartside
  • 20,378
  • 12
  • 60
  • 81
4
votes
0 answers

box-shadow CSS property not working properly on iOS

function getLocation(parameter) { const queryString = new URLSearchParams(window.location.search); const queryStringParam = queryString.get(parameter); return queryStringParam; }; function fillServiceItemContent(parameter,…
Z O L E
  • 53
  • 5
4
votes
1 answer

Box shadow around column of CSS grid

I currently have a CSS grid with a dynamic number of rows where there are subsets of the rows that should be grouped together. I'd like to wrap the first column of those groups together with a drop shadow, but I can't figure out how to do this. I'm…
Chris
  • 711
  • 1
  • 7
  • 12
4
votes
2 answers

How to have a drop shadow on a transparent rect svg

I want to have a drop shadow on a transparent SVG element. I have tried using all different kinds of filters but to no avail. css3 filters on the svg element(filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));), the new dropshadow…
Lukas Chen
  • 373
  • 7
  • 15
4
votes
1 answer

Changing background-color of child removes box-shadow on parent

I am reading MDN Docs and a few articles, like this one, and question after question after question among others, but I can't seem to find a way around my particular problem. I have a card-type element that includes a full-width form of radio…
wlh
  • 3,426
  • 1
  • 16
  • 32
4
votes
1 answer

How can I make box shadow show over the next element in a container?

Please see this code: http://codepen.io/Varin/pen/kkGgVd
…
Varin
  • 2,354
  • 2
  • 20
  • 37
4
votes
3 answers

Remove drop-shadow from left side only

I have this button that has an :after to create an arrow. I'm giving the button a box-shadow, and giving the :after a drop shadow to make the :after look like it is part of the button. However there is a tiny bit of shadow running down the left edge…
BeniaminoBaggins
  • 11,202
  • 41
  • 152
  • 287
1 2
3
…
26 27