Adding gradient colour to image borders in 7.1

Hi guys, 

I hope you can help me. I'm trying to add gradient colours within all my image border frames. 

I've used this code in CSS to create the silver borders:

.design-layout-inline .image-block-wrapper {border: 5px solid #9b9b9b; overflow:visible!important; box-shadow:inset 5px 5px 15px rgba(0,0,0,0.3)}
design-layout-inline img {margin-left: 25px; margin-top: 25px; }

But I'd like to make them gradient to go from darker silver to nearly white.

Can you please help me?

Thanks so much!

Claudia 

I think you need to use CSS peseudo to add content around image, then you can use CSS background gradient to achieve the request.

Can you share link to page in screenshot? We can check easier.

Thank you. Attached is the screenshot of the page, although the website is not live yet.

You can setup an access password (not login password) & then share url, we can check easier

Sure, please try: 

Url - https://mackerel-rhubarb-66cp.squarespace.com/

Pass: Marcus

Please let me know if you need anything else.

Thanks so much!

Add this CSS

/* Image border gradient */
div#page-section-619b9327f8fb7b60a5a0f5a8 {
.image-block-wrapper {
    position: relative;
    z-index: 9999;
}
.image-block-wrapper:before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background-image: linear-gradient(0deg, red, yellow);
}}

Amazing! It did work 😀 Thanks so much for your help!!

Hi there.

I would really appreciate if anyone could help me solve this too.
I wish to make the borders of the three images on the front page of this website: https://chipmunk-iguana-ffam.squarespace.com/
The password is: Hakunamatata12!

The outcome should make the borders softer if that makes sense?

Thank you so much!

- Anja.

On 1/29/2024 at 3:45 PM, Floe said:

Hi there.

I would really appreciate if anyone could help me solve this too.
I wish to make the borders of the three images on the front page of this website: https://chipmunk-iguana-ffam.squarespace.com/
The password is: Hakunamatata12!

The outcome should make the borders softer if that makes sense?

Thank you so much!

- Anja.

Hakunamatata12!

password is incorrect. Can you check it again?

2 hours ago, tuanphan said:

Hakunamatata12!

password is incorrect. Can you check it again?

New password:

password12

Sorry for the trouble!

On 2/1/2024 at 1:19 PM, Floe said:

New password:

password12

Sorry for the trouble!

I remember I sent code in another thread, you try checking it again