# Add gradient effect

**URL:** <https://community.elfsight.com/t/add-gradient-effect/38108>\
**Category:** Button\
**Created:** [January 19, 2024, 6:25pm UTC](https://community.elfsight.com/t/add-gradient-effect/38108 "2024-01-19T18:25:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [January 19, 2024, 6:25pm UTC](https://community.elfsight.com/t/add-gradient-effect/38108/1 "2024-01-19T18:25:28Z")

</div>

Add this code to the Custom CSS field on the Design tab of your [Button](https://elfsight.com/button-widget/) widget’s settings:

```auto
[class^="ButtonBase__ButtonContainer"] {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
border: none;
}

```

---

<div class="post-metadata">

**Author:** ![Joshua5](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@Joshua5](https://community.elfsight.com/u/Joshua5)\
**Post date:** [April 13, 2026, 1:54pm UTC](https://community.elfsight.com/t/add-gradient-effect/38108/2 "2026-04-13T13:54:05Z")

</div>

Awesome, thanks for sharing!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 13, 2026, 2:11pm UTC](https://community.elfsight.com/t/add-gradient-effect/38108/3 "2026-04-13T14:11:17Z")

</div>

I am really happy to know that this code did the trick for you! Many thanks for sharing your experience 😉