Jump to content

Adding gradient colour to image borders in 7.1

Recommended Posts

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 

Screenshot 2021-12-14 132820.jpg

Link to comment
  • 2 weeks later...

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);
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.