# Tutorial: Build a blurry background Custom Component

**URL:** <https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417>\
**Category:** Elements\
**Created:** [August 26, 2024, 4:15pm UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417 "2024-08-26T16:15:38Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 26, 2024, 4:15pm UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/1 "2024-08-26T16:15:38Z")

</div>

Hey Weavers,

We’re starting a new series of Element tutorials, hopefully we can build up a nice library overtime that will help new users coming into the platform!

In this tutorial I’ll show you how to build a Custom TailwindCSS Component that displays a customizable blurry background. If you’ve not delved into custom components yet, maybe now is the perfect time 🤓

 ![CleanShot 2024-08-26 at 4 .37.43@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/5/f55a8718d6cd54917e052577621fd95ba1a80030.jpeg)

### Blurry Background using TailwindCSS

Watch the video below to see how it’s all put together, and don’t forget to download the project below if you want to follow along at the same time.

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/b/3b9207e75c852c7232229619b31ac75aafa31a41.jpeg "Blurry Background component using Tailwind CSS") ](https://www.youtube.com/watch?v=ekiHAQDWsMg)

### Resources:

- [Download Elements Blurry Background Project](https://www.realmacsoftware.com/downloads/elements/components/blurry-background-component.zip)
- [Building Blurry, Animated Background Shapes with Tailwind CSS](https://www.youtube.com/watch?v=Tmkr2kKUEgU&t=39s)
- [Tailwind CSS source code](https://play.tailwindcss.com/ULwT6MTmWI)

### Feedback

Let me know what you thought of the tutorial, was it helpful? what else would you like to see covered? Let me know in the comments below!

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [August 26, 2024, 4:43pm UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/2 "2024-08-26T16:43:49Z")

</div>

Hi @dan - a useful video - thanks. 👍

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [August 26, 2024, 4:49pm UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/3 "2024-08-26T16:49:30Z")

</div>

The link: [https://www.realmacsoftware.coml/downloads/elements/components/blurry-background-component.zip](https://www.realmacsoftware.coml/downloads/elements/components/blurry-background-component.zip)

has got a stray **l** after the .com

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 26, 2024, 4:54pm UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/4 "2024-08-26T16:54:26Z")

</div>

Doh — All fixed now!

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 26, 2024, 7:28pm UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/5 "2024-08-26T19:28:09Z")

</div>

Dan when I view your project in safari from Elements the AWESOME is faint like its behind, its ok in Elements

I added the extra div, it then worked for me, not sure if its a bug or its me

````auto
<div class="bg-gray-50 min-h-screen flex items-center justify-center px-16">
  <div class="relative w-full max-w-lg">
    <div class="absolute top-0 -left-0 w-72 h-72 {{customColor1}} rounded-full mix-blend-multiply filter blur-2xl opacity-70 scaling-element"></div>
    <div class="absolute top-0 -right-0 w-72 h-72 {{customColor2}} rounded-full mix-blend-multiply filter blur-2xl opacity-70 scaling-element animation-delay-2000"></div>
    <div class="absolute -bottom-8 left-20 w-72 h-72 {{customColor3}} rounded-full mix-blend-multiply filter blur-2xl opacity-70 scaling-element animation-delay-4000 "></div>
    <div class="absolute inset-0">@dropzone(name: "content")</div>
    </div>
  </div>
</div>```
````

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 26, 2024, 8:57pm UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/6 "2024-08-26T20:57:00Z")

</div>

Ah yes, that’s a great addition, works much better!!!

I think I might continue working on this component, I have a few other things I’d like to add… sure is addictive this stuff 🤓

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 26, 2024, 9:17pm UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/7 "2024-08-26T21:17:01Z")

</div>

Very addictive, too addictive, it’s driving my wife mad

---

<div class="post-metadata">

**Author:** ![klap](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/klap/32/25866_2.png) [@klap](https://forums.realmacsoftware.com/u/klap)\
**Post date:** [August 26, 2024, 11:01pm UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/8 "2024-08-26T23:01:13Z")

</div>

Thank you much for this! works great!

---

<div class="post-metadata">

**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\
**Post date:** [August 27, 2024, 3:54am UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/9 "2024-08-27T03:54:21Z")

</div>

OK, I’m playing with this. I’ve added a heading and a grid to the dropzone but struggling to change the size (specifically width) of the dropzone content?

Non-coding me found if I remove **w-full max-w-lg** from the class it seems to resolve it and allow resizing through Margin.

Is there a way to make this editable through a custom control/slider? I’ve tried adding one without success - I’m not quite sure what and how I should be addressing it.

---

<div class="post-metadata">

**Author:** ![39Graphics](https://avatars.discourse-cdn.com/v4/letter/3/3be4f8/32.png) [@39Graphics](https://forums.realmacsoftware.com/u/39Graphics)\
**Post date:** [August 27, 2024, 6:23am UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/10 "2024-08-27T06:23:48Z")

</div>

Hi Dan,

Quick question, what specs would you say a Mac should have to run Elements without killing it? (Ram, CPU and so on)

Thanks so much,  
Jesse

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 27, 2024, 8:46am UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/11 "2024-08-27T08:46:42Z")

</div>

Any Mac that runs macOS Ventura or newer should be fine!

---

<div class="post-metadata">

**Author:** ![39Graphics](https://avatars.discourse-cdn.com/v4/letter/3/3be4f8/32.png) [@39Graphics](https://forums.realmacsoftware.com/u/39Graphics)\
**Post date:** [August 27, 2024, 11:07am UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/12 "2024-08-27T11:07:34Z")

</div>

So ram isn’t an issue?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 27, 2024, 12:52pm UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/13 "2024-08-27T12:52:49Z")

</div>

It shouldn’t be… what Mac do you have?

---

<div class="post-metadata">

**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\
**Post date:** [August 27, 2024, 3:57pm UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/14 "2024-08-27T15:57:06Z")

</div>

Hi @dan

Just a couple thoughts on doing tutorials:  
Focus on one thing in each vid and keep vid under 2 mins. This ‘blurry’ example was a fine example of how to build a custom element, but is really for more advanced users. The vid didn’t address blur at all and the major thing users will want to do is blur an image. Don’t get me wrong, there could be a huge library of technical tutorials for people like me, but I think you should first focus on the super basics for the majority of the users - I’m sure there will be a massive amount of vids I have no doubt.

---

<div class="post-metadata">

**Author:** ![39Graphics](https://avatars.discourse-cdn.com/v4/letter/3/3be4f8/32.png) [@39Graphics](https://forums.realmacsoftware.com/u/39Graphics)\
**Post date:** [August 28, 2024, 12:25am UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/15 "2024-08-28T00:25:58Z")

</div>

I use a Mac mini 2020 with M1 chip, but it is not mine. I am looking at getting my own laptop and may download ‘elements’ onto it, so I just want to know if I will crash the computer.  
The Mac mini copes with Rapidweaver well, but sometimes will just force quit. So I figured that maybe it hasn’t got enough ram.

---

<div class="post-metadata">

**Author:** ![jscotta](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jscotta/32/26082_2.png) [@jscotta](https://forums.realmacsoftware.com/u/jscotta)\
**Post date:** [August 28, 2024, 2:01am UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/16 "2024-08-28T02:01:58Z")

</div>

A lot will depend on what else you are running at the time. Mac’s typically handle RAM swapping very well. Your machine may slow down some but typically will not crash. Elements, even in the current pre-release state doesn’t seem to use any more system resources than Rapidweaver so you should be fine.

With that said, if you are using Rapidweaver to build websites you are actually publishing, stick with it for now. Elements is pre-release and not ready to put out websites.

This is all my opinion.

---

<div class="post-metadata">

**Author:** ![39Graphics](https://avatars.discourse-cdn.com/v4/letter/3/3be4f8/32.png) [@39Graphics](https://forums.realmacsoftware.com/u/39Graphics)\
**Post date:** [August 28, 2024, 6:06am UTC](https://forums.realmacsoftware.com/t/tutorial-build-a-blurry-background-custom-component/44417/17 "2024-08-28T06:06:40Z")

</div>

Thanks James! That is helpful.