# A Simple Card Fade Effect

**URL:** <https://forum.babylonjs.com/t/a-simple-card-fade-effect/59945>\
**Category:** Demos and projects\
**Created:** [August 7, 2025, 9:56am UTC](https://forum.babylonjs.com/t/a-simple-card-fade-effect/59945 "2025-08-07T09:56:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Moriy](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/moriy/32/30563_2.png) [@Moriy](https://forum.babylonjs.com/u/Moriy)\
**Post date:** [August 7, 2025, 9:56am UTC](https://forum.babylonjs.com/t/a-simple-card-fade-effect/59945/1 "2025-08-07T09:56:16Z")

</div>

Create a simple card fade effect to practice shader writing 😃

PG : [https://playground.babylonjs.com/#7339J2#1](https://playground.babylonjs.com/#7339J2#1)

Replace “step” with “smoothstep” to make the lines clearer

> **[Babylon.js Playground](https://playground.babylonjs.com/#7339J2%233)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [August 7, 2025, 12:08pm UTC](https://forum.babylonjs.com/t/a-simple-card-fade-effect/59945/2 "2025-08-07T12:08:29Z")

</div>

Great transition effect! Nice work!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 7, 2025, 3:04pm UTC](https://forum.babylonjs.com/t/a-simple-card-fade-effect/59945/3 "2025-08-07T15:04:56Z")

</div>

Agreed! This is nice!

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [August 7, 2025, 3:18pm UTC](https://forum.babylonjs.com/t/a-simple-card-fade-effect/59945/4 "2025-08-07T15:18:01Z")

</div>

That is pretty clean!

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 11, 2025, 2:33pm UTC](https://forum.babylonjs.com/t/a-simple-card-fade-effect/59945/5 "2025-08-11T14:33:38Z")

</div>

Nice !!!