Kevin Powell - Community•3mo ago

Blurred circle inside div

Hi! I have created this effect in Figma of a blurred circle contained in a div. Below is how far I have got but I am running in to a problem. The circle is popping out of the div and I cannot seem to see how I would cut it to fit the div

<section class="relative bg-object rounded-md mx-1 py-1 -z-20">
    <div class="circle" />
    <h2 class="text-center">{title}</h2>
    <p class="mx-3">{description}</p>
</section>

<style>
    .circle {
        --radius: 200px;
        --bg-gradient: linear-gradient(theme(colors.accent), #fa431b);
        @apply rounded-full bg-accent absolute -z-10;
        width: var(--radius);
        height: var(--radius);
        bottom: calc(0px - var(--radius) / 2);
        left: calc(0px - var(--radius) / 2);
        filter: blur(30px);
        background: var(--bg-gradient);
    }
</style>

<section class="relative bg-object rounded-md mx-1 py-1 -z-20">
    <div class="circle" />
    <h2 class="text-center">{title}</h2>
    <p class="mx-3">{description}</p>
</section>

<style>
    .circle {
        --radius: 200px;
        --bg-gradient: linear-gradient(theme(colors.accent), #fa431b);
        @apply rounded-full bg-accent absolute -z-10;
        width: var(--radius);
        height: var(--radius);
        bottom: calc(0px - var(--radius) / 2);
        left: calc(0px - var(--radius) / 2);
        filter: blur(30px);
        background: var(--bg-gradient);
    }
</style>

Please excuse me using Tailwind 🥺

2 Replies

ChooKing•3mo ago

I don't see a circle popping out, and it's unclear if either screenshot is the intended look or what you actually got. However, it sounds like you probably just want to hide the overflow on the section.

Zax71•3mo ago

Ah, hide overflow looks like exactly it! I’ll take a look when I can next look at this. For context of those referencing this in the future, it is the one without text that I want and that with text that I have Can confirm, putting that on the container was exactly what I needed

Gaming

Programming

Blurred circle inside div