Mastering Elemental Elegance

In creating a shadow akin to box-shadow but derived from the element’s own colors, I employed the ::after pseudo-element technique.

<div class=”dynamic-shadow”></div>.dynamic-shadow {
position: relative;
width: 10rem;
height: 10rem;
background: linear-gradient(75deg, #6d78ff, #00ffb8);
z-index: 1;
}

.dynamic-shadow::after {
content: ”;
width: 100%;
height: 100%;
position: absolute;
background: inherit;
top: 0.5rem;
filter: blur(0.4rem);
opacity: 0.7;
z-index: -1;
}

This involved setting its position as absolute and dimensions to 100% to ensure it fills the parent element.

By utilizing background: inherit, the pseudo-element inherited the background of its parent. A slight offset was applied using the top property.

The desired shadow effect was achieved through the application of filter: blur() for blur and adjusting opacity for semi-transparency.

To position the shadow appropriately, z-index: 1 was assigned to the parent element and z-index: -1 to the pseudo-element, ensuring it remains behind its parent visually.

Happy coding!

Crafting Dynamic Shadows with CSS was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

​ Level Up Coding – Medium

about Infinite Loop Digital

We support businesses by identifying requirements and helping clients integrate AI seamlessly into their operations.

Gartner
Gartner Digital Workplace Summit Generative Al

GenAI sessions:

  • 4 Use Cases for Generative AI and ChatGPT in the Digital Workplace
  • How the Power of Generative AI Will Transform Knowledge Management
  • The Perils and Promises of Microsoft 365 Copilot
  • How to Be the Generative AI Champion Your CIO and Organization Need
  • How to Shift Organizational Culture Today to Embrace Generative AI Tomorrow
  • Mitigate the Risks of Generative AI by Enhancing Your Information Governance
  • Cultivate Essential Skills for Collaborating With Artificial Intelligence
  • Ask the Expert: Microsoft 365 Copilot
  • Generative AI Across Digital Workplace Markets
10 – 11 June 2024

London, U.K.