How can I create a rainbow gradient for my website's announcement bar?

Store Design
1

Hi,

Im looking to make the announcement bar on my website a rainbow gradient, could someone assist with this please?

Www.riotpwr.com is the site.

Thanks

2

hello which colors you want on it ?

3

The colour codes are:

#ff6355
#fba949
#fae442
#8bd448
#2aa8f2
#9c4f96

Please

4

This isnt the colors you specified, but it’s a rainbow gradient. You can put it at the bottom of your theme.scss.liquid file in your assets folder:

.announcement-bar {
  background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}
2 Likes
5

This is great thank you!!

6

Hi-

I have the Icons 2.0 Theme and this solution didn’t work. I too would like announcement bar gradient and only two colors.

Do you have a solution. Any help is greatly appreciated.

Thank you.

Best,

7

Post your store url and password if password protected, it likely uses a different class name.

8

url: dev46.org

pw: vulyew

9

You’ll want to add this code:

.announcement__bar-section {
  background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}
1 Like
10

Perfect! Thank you so much!!! Have a beautiful day!

11

No problem, glad it helped. Have a good one.

1 Like