Jump to content

Help with transparent border and background gradient

Recommended Posts

Site URL: http://www.beautifuluseful.co

Hi gang,

I managed to get this working with CSS but then "broke it" on purpose by taking away some curly brackets, and now I can't get it working again! 

Essentially I'm trying for a gradient border around the whole site (on 7.1), and succeeded in doing this with code for a transparent border + a background gradient behind, and now I can't get it to work again. I've got the border working (but can't tell if it's actually transparent since there's nothing behind it...).

My goal is a border similar to this one: https://aestheticsofjoy.com/

The custom CSS + notes I left for myself look like this (and, yes I did add the curly brackets back and take away the //s): 

// {

  background-image: linear-gradient(to bottom right, #F4C6CD,  #FAD1CF, #FFCC66);

body { border:40px solid transparent; 

header margin:25px 25px 0 25px; // 

  // neeed to add end curly parenthesis back in for this to work


Currently here's what I've got with the border working, but still no gradient:

body { border:25px solid transparent; }
header { margin:25px 25px 0 25px; }
gradient { background-image: linear-gradient(to bottom right, #F4C6CD,  #FAD1CF, #FFCC66); }


It's driving me mad not being able to figure out why I got this to work a month or so ago and now I'm having ZERO luck with anything on the gradient side. Help??




Link to comment
  • Replies 3
  • Views 2.2k
  • Created
  • Last Reply
  • 4 months later...


This topic is now archived and is closed to further replies.

  • 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.