Topic: How to Add shadows? for button & Container?

rustamabbasi101
January 12, 2024 at 10:34 pm

I want to add shadows for button and container but I haven’t found any options, I have only GP Premium but i don’t have premium GP-blocks
David
January 13, 2024 at 4:39 am
Hi there,

it will require some CSS.

1. Add this CSS to your site:
```
.has-box-shadow {
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}
```
You can create your own box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1); code using a site like this:

https://box-shadow.dev

2. Select the Container Block, or Button Block, and in Advanced > Additional CSS Class(es) add: has-box-shadow
rustamabbasi101
March 1, 2024 at 11:03 am

the method you mentioned above enables same shadow for the whole website containers, now tell me the code/method that also enables shadows for the website and allow custom shadows for each container with the help of additional css field of each container
David
March 1, 2024 at 2:05 pm
The code will only apply to Containers that have the has-box-shadow CSS class.

And you can create other CSS rules likes so:
```
.has-box-shadow-1 {
    box-shadow: 0px 5px 10px 3px rgba(0,0,0,0.1);
}
.has-box-shadow-2 {
    box-shadow: 0px 25px 30px 10px rgba(0,0,0,0.1);
}
```
Then you can add the respective class eg. has-box-shadow-1 or has-box-shadow-2 to the Container.
rustamabbasi101
March 3, 2024 at 10:43 am

Thank you got it, thank you very much for the solution
David
March 3, 2024 at 1:52 pm

You’re welcome

Viewing 6 posts - 1 through 6 (of 6 total)

How to Add shadows? for button & Container?