csstailwind-css

Tailwinds Box-shadow

I want a box shadow effect to look like this picture >> enter image description here

Currently mine looks like this, How do i made the color darker and have it on all sides. enter image description here

 <div className="card shadow-xl shadow-gray-900">

This is my current code

Solution

  • Its not possible to do shadow at the center of the div with tailwind's choices so you have to make a custom shadow yourself which is possible in tailwind like this:

    <div class="bg-white drop-shadow-[0_0px_10px_rgba(0,0,0,0.25)] rounded-md">
        <p>Hello</p>
</div>

    or you can go to tailwind.config.js and add some custom CSS for example:

    module.exports = {
  theme: {
    extend: {
      dropShadow: {
        '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
        '4xl': [
            '0 35px 35px rgba(0, 0, 0, 0.25)',
            '0 45px 65px rgba(0, 0, 0, 0.15)'
        ]
      }
    }
  }
}

    or another choice is to just make another CSS file (if you have already then no need to make another CSS file). and then add this:

    .customShadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

    then as for the html file:

    <div class="bg-white customShadow rounded-md">
        <p>Hello</p>
</div>