Shadows, gradients, and opacity
Shadows can communicate elevation, but too many strong shadows create visual noise. Use subtle shadows for cards and stronger elevation for overlays when it fits the design. Gradients use background utilities and can create emphasis, but text placed on a gradient still needs sufficient contrast across every part of the gradient.
Opacity modifies how an element or color is rendered. Applying opacity to a parent affects its descendants too; a translucent background color is often better when only the surface should be transparent.
Gradient hero panel
<section class="overflow-hidden rounded-2xl bg-gradient-to-br from-blue-700 via-indigo-700 to-violet-800 p-8 text-white shadow-lg sm:p-12">
<p class="text-sm font-semibold text-blue-100">WEEKLY INSIGHT</p>
<h2 class="mt-3 max-w-xl text-3xl font-bold tracking-tight">Your team is building momentum.</h2>
<p class="mt-4 max-w-xl leading-7 text-indigo-100">Completion is up this week. Keep the next milestone visible and actionable.</p>
</section>đź’ˇ The gradient creates visual focus while light text colors preserve hierarchy.
overflow-hidden clips the background to the rounded corners; use it only if clipping descendant content is acceptable.Knowledge Check
Why can `opacity-50` on a parent be a poor choice for a translucent card background?