reaction test logoTailwind Best

Generate BG Blur Effects with Tailwind CSS
Bg Blur Tailwind

This tutorial will guide you through using Tailwind CSS to quickly and effectively create a background blur (BG Blur) effect, enhancing your website's visual appeal.

https://tailwind.best

Source Code(JSX)


<div className="flex h-full w-full overflow-hidden bg-base-100" style={{width: '100%', height: '100%'}}>
    <div className="h-3/6 w-2/5 translate-x-2 translate-y-1/2 opacity-70">
        <div className="h-full w-full opacity-70 blur-2xl">
            <div className="h-full w-full blur-2xl">
                <div className="rotate-30 h-full w-full bg-purple-600 blur-2xl" style={{clipPath: 'polygon(40% 0%, 100% 30%, 80% 100%, 20% 100%, 0% 30%)'}}></div>
            </div>
        </div>
    </div>
    <div className="h-2/6 w-1/6 -translate-x-1/2 translate-y-2 opacity-80">
        <div className="h-full w-full opacity-80 blur-2xl">
            <div className="h-full w-full blur-2xl">
                <div className="rotate-45 h-full w-full bg-indigo-500" style={{clipPath: 'polygon(60% 0%, 100% 40%, 70% 100%, 30% 100%, 0% 40%)'}}></div>
            </div>
        </div>
    </div>
    <div className="h-3/6 w-2/5 translate-x-3/4 translate-y-1/4 opacity-60">
        <div className="h-full w-full opacity-60 blur-2xl">
            <div className="h-full w-full blur-2xl">
                <div className="rotate-12 h-full w-full bg-deep-purple-400" style={{clipPath: 'polygon(50% 0%, 100% 20%, 80% 100%, 20% 100%, 0% 20%)'}}></div>
            </div>
        </div>
    </div>
</div>