# How to apply Shimmer Effect

**URL:** <https://community.weweb.io/t/how-to-apply-shimmer-effect/7582>\
**Category:** Ask us anything\
**Created:** [March 14, 2024, 6:55pm UTC](https://community.weweb.io/t/how-to-apply-shimmer-effect/7582 "2024-03-14T18:55:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lapola](https://avatars.discourse-cdn.com/v4/letter/l/ed655f/32.png) [@Lapola](https://community.weweb.io/u/Lapola)\
**Post date:** [March 14, 2024, 6:55pm UTC](https://community.weweb.io/t/how-to-apply-shimmer-effect/7582/1 "2024-03-14T18:55:53Z")

</div>

Does anyone know how I can implement “Shimmer Effect” in my web collections?

Examples follow:

[![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/233491128d864fcc421a285cefdfbddfc98f995c.jpeg "How To Add Shimmer Effect to Your App (And Why You Should)") ](https://www.youtube.com/watch?v=j4QPZYB3pj8)

https://codepen.io/Raphaelakpofure/embed/preview/wvJJpWr?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=wvJJpWr

---

<div class="post-metadata">

**Author:** ![Fix](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fix/32/8212_2.png) [@Fix](https://community.weweb.io/u/Fix)\
**Post date:** [March 14, 2024, 7:15pm UTC](https://community.weweb.io/t/how-to-apply-shimmer-effect/7582/2 "2024-03-14T19:15:56Z")

</div>

Hi @Lapola ,

This amazing video of @jptrinh maybe help you 😉

[How to create a skeleton loader on Weweb](https://youtu.be/Hi8PnTT6vkY?feature=shared)

---

<div class="post-metadata">

**Author:** ![Lapola](https://avatars.discourse-cdn.com/v4/letter/l/ed655f/32.png) [@Lapola](https://community.weweb.io/u/Lapola)\
**Post date:** [March 14, 2024, 7:19pm UTC](https://community.weweb.io/t/how-to-apply-shimmer-effect/7582/3 "2024-03-14T19:19:02Z")

</div>

I’ll try that, thanks

---

<div class="post-metadata">

**Author:** ![djoz](https://avatars.discourse-cdn.com/v4/letter/d/ecc23a/32.png) [@djoz](https://community.weweb.io/u/djoz)\
**Post date:** [April 28, 2026, 2:23am UTC](https://community.weweb.io/t/how-to-apply-shimmer-effect/7582/4 "2026-04-28T02:23:00Z")

</div>

## **Text Clipped Shimmer Animation**

For a text clipped shimmer “e.g. Loading…” add this to the header:

```auto
<style>
.wave-text,
.wave-text p,
.wave-text span,
.wave-text * {
  background-image: linear-gradient(90deg, #111 30%, #bbb 50%, #111 70%) !important;
  background-size: 200% auto !important;
  background-position: 200% center;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: gradientWave 1800ms linear infinite !important;
  will-change: background-position;
  display: inline-block !important;
}

@keyframes gradientWave {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
</style>

```

and then add the class tag “wave-text” to your element’s class input field. The “!important” tags override WeWebs styling