<div className="w-full bg-gradient-to-r from-purple-400/25 via-pink-500/25 to-red-500/25 rounded p-6 mt-4">
        // children...
</div>

Example 2

@layer utilities {
    .heading {
        @apply text-gray-700 text-3xl font-semibold mb-9 before:content-['>'] bg-gradient-to-r from-transparent   via-[#515CC6]/30 via-50% to-[#82DABF]/50 to-80% rounded-tl-[17px] rounded-tr-[52px] rounded-bl-[27px] rounded-br-[21px] inline-block pl-4 pr-6
    }
}