Browser support for box-shadow

Posted About 12 years ago. Visible to the public. Linked content.

Basic box shadow Show archive.org snapshot support is available in all browsers today, but you need to check to which extend they are supported. Implementations differ:

  • Are multiple box shadows (separated by comma) possible?
  • Are inset shadows possible?
  • Can the spread radius be defined?
  • Can you use it without vendor prefix?

A good compatibility chart can be found here Show archive.org snapshot . The gist is that, except for IE and some Safaris, you can use all features today without vendor prefixes.

Support of all features is guaranteed in:

  • Firefox 4.0
  • Chrome 10.0
  • Internet Explorer 9.0
  • Opera 10.5
  • Safari 5.1
developer.mozilla.org
Ulrich Berkmueller
Say thanks
Last edit
About 12 years ago
License
Source code in this card is licensed under the MIT License.

Related cards:

Large CSS box shadows can bring browsers to a crawl

Browser rendering engines are very slow at rendering large box shadows. I had a situation where a complex layout with fixed elements and large shadows slowed Firefox down to 2 frames/second for scrolling and DOM manipulation.

Some advice:

  • Be a...

Make box shadows look the same in IE and other browsers

The box shadows created rendered in IE by CSS3PIE look darker and are blurred differently than in browsers that render box-shadow natively.

If possible, try to be OK with this. If not, make an IE-only stylesheet that uses...

Remove resource fork files from a FAT volume on MacOS

Be careful!
The following solution will delete files on a volume. If you don't know exactly what you're doing, you can run into big trouble with your computer.

I play mp3 files on my car stereo that are stored on a SD-C...

BrowserStack has browser plugins for local testing

Local testing allows you to test your private and internal servers using the BrowserStack cloud, which has support for firewalls, proxies and Active Directory.

CSS: Emulate linear gradients with inset box shadows

Why is this useful?

  • You can have a background image on the same element, overlaying it with a transparent gradient.
  • Since you are probably using gradients to give an element a glossy or three-dimensional feel, box shadows w...

A solid and unobtrusive plugin for form field placeholders

jquery-placeholder is a simple jQuery plugin that enables form placeholders in browsers that do not support them natively, i.e. IE < 10.

Properties

  • Works in IE6.
  • Automatically checks whether the browser natively supports the HTML5 place...

How to not die with ActionView::MissingTemplate when clients request weird formats

When HTTP clients make an request they can define which response formats they can process. They do it by adding a header to the HTTP request like this:

Accept: application/json

This means the client will only understand JSON respon...

Interactive generator for gradients, borders, noise textures and box shadows

CSSmatic lets you play around with four rather complex CSS stylings and gives you CSS or SASS code to use your result right away.

  • Gradients
  • Borders
  • Noise textures – offers a texture download
  • Box shadows

Always show all form errors during development

You've been there: A form cannot be submitted, but you don't see a validation error because the field at fault has no corresponding input field on the form. Because this is usually a bug, you insert debug information listing all errors into the fo...

Use <input type="number"> for numeric form fields

Any form fields where users enter numbers should be an <input type="number">.

Numeric inputs have several benefits over <input type="text">:

  • On mobile or tablet devices, number fields show a special virtual keyboard that shows mostly digit...
Posted by Ulrich Berkmueller to makandra dev (2012-05-04 12:56)
This website uses short-lived cookies to improve usability.
or learn more