Tailwind glowing gradient effect

created at: 12/24/2022
# tailwind
# css

For effects like a glowing background, sometimes a drop-shadow is not the right thing. Shadows should be used to display elevation.

Another option here is blur that gets applied to an element with the desired background (e.g. a color or a gradient). The important part is, that the element that is responsible for the glow is positioned as absolute behind the root element.

 <div class="group relative inline-block">

<div class="absolute -inset-0.5 rounded-lg bg-skin-accent opacity-75 blur transition-all duration-200 group-hover:opacity-100"/>

<button class="relative rounded-lg bg-skin-background {classMap[type]}">

<slot />

</button>

</div>

References

© 2022