Member Avatar for yashonweb

Hi friend,

can somebody tell me how to apply shadow to website.

yash

  • 3 Contributors
  • 2 Replies
  • 58 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by peter_nichol

Dani AI

Generated

— quick update that builds on the older replies from and . Back then image-based shadows were common, but today you can use native CSS for most cases. Native shadows scale with layout, are easy to tweak, and animate smoothly when needed.

For rectangular elements use box-shadow; for images you can use filter: drop-shadow(). A simple example:

.card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

Layering a couple of shadows gives more depth:

.card {
  box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 12px 30px rgba(0,0,0,0.12);
}

Browser support and details are on the MDN box-shadow page and a compatibility summary at Can I Use: box-shadow. Keep shadows as progressive enhancement: make sure the UI is still clear without them for very old browsers. Performance tip: avoid animating large blurred shadows; use subtle, layered shadows or animate transforms instead. Accessibility note: do not rely on shadows alone to indicate state — also use contrast, outlines, or visible icons.

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

You have to create it as an image. Shadow is not supported in web technology.

You could fake it by creating a box object with a shadow-colored border on two sides.

Member Avatar for peter_nichol

When creating this shadow image you will want the semi transparency and so I'd recommend making a png file as then you have the ability to change the background colour of your website and the shadow will still remain.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.