# Blur components

> Apply creative blur effects using 15 React components with Tailwind CSS, perfect for backgrounds, overlays, and dynamic UI elements.

173 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/blur.

- [Progressive blur](https://21st.dev/@ibelick/components/progressive-blur/with-slider-and-different-directions.md) — by Julien Thibeaut
- [Progressive blur](https://21st.dev/@ibelick/components/progressive-blur/with-hover.md) — by Julien Thibeaut
- [Progressive blur](https://21st.dev/@ibelick/components/progressive-blur.md) — by Julien Thibeaut
- [Progressive Blur](https://21st.dev/@reuno-ui/components/progressive-blur.md) — by reuno-ui
- [Progressive Blur](https://21st.dev/@dillionverma/components/progressive-blur.md) — by Dillion Verma
- [Liquid Glass](https://21st.dev/@suraj-xd/components/liquid-glass.md) — by Suraj Gaud
- [Background Gradient Animation](https://21st.dev/@manuarora700/components/background-gradient-animation.md) — by Manu Arora
- [Background Components](https://21st.dev/@meghtrix/components/background-components/cool-blue-glow-right.md) — by meghtrix
- [Background Components](https://21st.dev/@meghtrix/components/background-components/warm-orange-glow.md) — by meghtrix
- [Background Components](https://21st.dev/@meghtrix/components/background-components/teal-glow-right.md) — by meghtrix
- [Background Components](https://21st.dev/@meghtrix/components/background-components/purple-glow-left.md) — by meghtrix
- [Background Components](https://21st.dev/@meghtrix/components/background-components/purple-glow-right.md) — by meghtrix
- [Logo Carousel](https://21st.dev/@cult-ui/components/logo-carousel.md) — by cult/ui
- [Waitlist Hero](https://21st.dev/@minhxthanh/components/waitlist-hero.md) — by Le Thanh
- [Animated Gradient With SVG](https://21st.dev/@danielpetho/components/animated-gradient-with-svg.md) — by Daniel Petho
- [Blur Fade](https://21st.dev/@dillionverma/components/blur-fade.md) — by Dillion Verma
- [Glow Effect](https://21st.dev/@ibelick/components/glow-effect.md) — by Julien Thibeaut
- [Progressive blur](https://21st.dev/@serafimcloud/components/progressive-blur/with-logos.md) — by Julien Thibeaut
- [Glow Effect](https://21st.dev/@ibelick/components/glow-effect/card-with-glow.md) — by Julien Thibeaut
- [Glow Effect](https://21st.dev/@ibelick/components/glow-effect/glow-effect-button.md) — by Julien Thibeaut
- [Logo Cloud 4](https://21st.dev/@sshahaider/components/logo-cloud-4.md) — by Efferd
- [Unique Testimonial](https://21st.dev/@jatin-yadav05/components/unique-testimonial.md) — by Jatin Yadav
- [Perspective Marquee](https://21st.dev/@kapishdima/components/remocn-perspective-marquee.md) — by KapishDima
- [Gradient Card Showcase](https://21st.dev/@minhxthanh/components/gradient-card-showcase.md) — by Le Thanh
- [Flip Words](https://21st.dev/@manuarora700/components/flip-words.md) — by Manu Arora
- [Glass Calendar](https://21st.dev/@ravikatiyar162/components/glass-calendar.md) — by Ravi Katiyar
- [Glow](https://21st.dev/@mikolajdobrucki/components/glow.md) — by Mikolaj Dobrucki
- [Animated Blur Number](https://21st.dev/@serafimcloud/components/animated-blur-number.md) — by Serafim
- [Emoji Rating](https://21st.dev/@jatin-yadav05/components/emoji-rating.md) — by Jatin Yadav
- [Siri Orb](https://21st.dev/@m.umairwaheedansari/components/siri-orb.md) — by Umair Waheed
- [Minimal Testimonial](https://21st.dev/@jatin-yadav05/components/minimal-testimonial.md) — by Jatin Yadav
- [Portfolio Hero](https://21st.dev/@waleedkibhen/components/portfolio-hero.md) — by wisedev
- [Cosmos Spectrum](https://21st.dev/@designali-in/components/cosmos-spectrum.md) — by Ali Imam
- [Background Gradient Animation](https://21st.dev/@designali-in/components/background-gradient-animation/background-gradient-animation.md) — by Ali Imam
- [Focus Cards](https://21st.dev/@manuarora700/components/focus-cards.md) — by Manu Arora
- [BlurTextAnimation](https://21st.dev/@xubohuah/components/blur-text-animation.md) — by KainXu
- [Background snippets](https://21st.dev/@ibelick/components/background-snippets/background-blur-purple.md) — by Julien Thibeaut
- [Background snippets](https://21st.dev/@ibelick/components/background-snippets/background-blur-fuchsia-1.md) — by Julien Thibeaut
- [Background snippets](https://21st.dev/@ibelick/components/background-snippets/background-grid-fuchsia.md) — by Julien Thibeaut
- [Spotlight](https://21st.dev/@ibelick/components/spotlight.md) — by Julien Thibeaut
- [Blurred Stagger Text](https://21st.dev/@preetsuthar17/components/blurred-stagger-text.md) — by Preet Suthar
- [Blur In](https://21st.dev/@dillionverma/components/blur-in.md) — by Dillion Verma
- [Image loading](https://21st.dev/@tonyzebastian/components/image-loading.md) — by Tony Sebastian
- [Rotating Gradient Right](https://21st.dev/@ruixen.ui/components/rotating-gradient-right.md) — by Ruixen UI
- [Text Rewind](https://21st.dev/@kokonutd/components/text-rewind.md) — by Kokonut Baffier
- [Gooey Marquee](https://21st.dev/@designali-in/components/gooey-marquee.md) — by Ali Imam
- [In view](https://21st.dev/@ibelick/components/in-view.md) — by Julien Thibeaut
- [Image Reveal](https://21st.dev/@jatin-yadav05/components/image-reveal.md) — by Jatin Yadav
- [Blur Text Effect](https://21st.dev/@kauasodreas/components/blur-text-effect.md) — by User
- [Background Shader](https://21st.dev/@moazamtrade/components/background-shader.md) — by shadway
- [GeometricBlurMesh](https://21st.dev/@xubohuah/components/geometric-blur-mesh.md) — by KainXu
- [In view](https://21st.dev/@ibelick/components/in-view/multiple.md) — by Julien Thibeaut
- [Text Stagger Hover](https://21st.dev/@youcefbnm/components/text-stagger-hover.md) — by YoucefBnm Bnm
- [Feature Sections](https://21st.dev/@prebuiltui/components/feature-sections/special-features-section.md) — by prebuiltui
- [Hover Detail Card](https://21st.dev/@isaiahbjork/components/hover-detail-card.md) — by Isaiah
- [Button](https://21st.dev/@beratberkayg/components/button-1.md) — by beratberkay
- [Dotted Dialog](https://21st.dev/@serafimcloud/components/dotted-dialog.md) — by Serafim
- [Image Spotlight](https://21st.dev/@tonyzebastian/components/image-spotlight.md) — by Tony Sebastian
- [Cards](https://21st.dev/@lavikatiyar/components/cards.md) — by Lavi Katiyar
- [Text Reveal](https://21st.dev/@daiwiikharihar17147/components/text-reveal.md) — by Daiwiik Harihar

Full component directory: https://21st.dev/llms.txt