Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'gradient'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

Found 22 results

  1. Site URL: https://www.theemailschool.com/ I would. like to add linear gradient to my whole website. From left to write and top to bottom. I have this piece of code but it leaves white space all around. I'm using Brine template and 7.0. What am I doing wrong? .Main-content { background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); }
  2. Site URL: https://shuvamkabir.net I'm attempting to add a white gradient above my background images. My first thought is to add an additional element that serves as an intermediate layer. I've tried the following, which I copied from here : [data-section-id="xxxxxxxxxxxxxxx"]{ .section-background::after{ content:""; display:block; position:relative; width:100%; height:100%; /* in hsla color format (below), the last number is between 0 and 1 and changes the opacity */ background-color:hsla(100,20,50,.5) !important; } } And then replace the background-color() with a
  3. Site URL: https://puma-orb-9lss.squarespace.com/projects There is a strange grey color showing on my portfolio page gradient on mobile browser but not on computer browser. See images below for reference. Any knowledge on what might be causing the problem would be greatly appreciated!
  4. Site URL: https://pomegranate-clavichord-6l2a.squarespace.com Would love an assist, please... working on this site: https://pomegranate-clavichord-6l2a.squarespace.com/ Pass: zilla123 I'd like to use CSS to add a top-to-bottom gradient to the Navigation Bar (currently set to fixed/all-white), but do not know the proper CSS code to make this possible. I've attempted trying a few other working answers here on the forum for other 7.1 templates, but perhaps Clarkson is a bit different from the rest? Many thanks in advance.
  5. Hi, I am trying to add a gradient colour background to my markdown blocks. I have the main background green in place and have tried to add the gradient by changing the code to that below, but no gradient! Thanks. .markdown-block { background: linear-gradient(to right, #d6e6db, #e2f3e8, #d6e6db); }
  6. Site URL: https://moose-semicircle-6ext.squarespace.com/ Hello! I'm looking to achieve a gradient fade behind my navigation as I have a full width carousel. So I've used this code (found on another post here): .Header {background: rgb(245,245,245);background: linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 100%);} header { position: fixed !important; width: 100%; z-index: 99999; } @media only screen and (min-width:640px) { main { padding-top: 80px; } } .Footer {background: rgb(253,177,57);background: linear-gradient(180deg, rgba(2
  7. Site URL: https://www.montee.uk Hi, So I've been playing about with gradients for a little bit, with some decent success. However, there's a couple of things I'm struggling to figure out and the code I've found up to now doesn't seem to work. I'm wanting to give a gradient to the mobile menu, social links and nav menu hover. T̶h̶e̶ ̶o̶t̶h̶e̶r̶ ̶t̶h̶i̶n̶g̶ ̶I̶'̶v̶e̶ ̶j̶u̶s̶t̶ ̶n̶o̶t̶i̶c̶e̶d̶,̶ ̶i̶s̶ ̶t̶h̶a̶t̶ ̶m̶y̶ ̶f̶o̶o̶t̶e̶r̶ ̶b̶u̶t̶t̶o̶n̶s̶ ̶a̶r̶e̶n̶'̶t̶ ̶s̶h̶o̶w̶i̶n̶g̶ ̶t̶h̶e̶ ̶g̶r̶a̶d̶i̶e̶n̶t̶ ̶p̶r̶o̶p̶e̶r̶l̶y̶ ̶l̶i̶k̶e̶ ̶t̶h̶e̶ ̶r̶e̶s̶t̶ ̶o̶f̶ ̶t̶h̶e̶ ̶s̶i̶t̶e̶.̶.̶.̶ ̶i
  8. 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/
  9. Site URL: https://wisteria-panda-z2eg.squarespace.com/home Dear All, I have been researching for days with no success. is it possible to have sections with „soft edges“? By that I mean, if I have a section with black background and it overlaps with a section with an image background, can the edge of the black section have something like a transparency or opacity gradient? I want it to look like the image and black blend / morph into each other. To complicate things further, the image also has a parallax. Check it out here: https://wisteria-panda-z2eg.squarespace.com/
  10. Site URL: https://shark-clementine-5jph.squarespace.com/portfolio .portfolio-overlay { background: linear-gradient(to bottom, #ffffff00 50%, #000000)} I'm trying to have a black gradient that fades to transparent on the portfolio grid overlay. But the existing overlay prevents #FFFFFF00 from being transparent (it's just showing as white (#FFFFFF). Any help is greatly appreciated. And please let me know if I can provide any other info. I'll be sure to get back right away. Site password is: mz
  11. Site URL: http://www.rachaelrenee.photos Hi Im using the sonora template of the Brine family for a total redesign of my site. I want to add a gradient from white to transparent to the top header so that it flows smoothly into the image below but my navigation doesnt get lost in the image. I've been trying to figure out the code and sort of got it but then couldn't get it to apply to the header (it was applying to the image below the header), then I made a bunch of rushed attempts at changing it and lost the code i had and none of it now works. Thanks in advance for suggestions on how
  12. Hey - trying to put a gradient on my top sections on mostly all pages - but its targeting my footer as well - i`m using this code .page-section:nth-child(1){background: linear-gradient(30deg, turquoise, blue)!important;} .page-section:nth-child(1) .section-background{background-color:transparent!important}
  13. Hello, Hoping someone can help me with a website build I'm working on. I have some working custom CSS code: section[data-section-id="5e8ee9f70ac4ea59df0ec51f"] .section-background { background-color: #231f45; background-image: url("https://static1.squarespace.com/static/5e8ee8871b56fa68d7df7b4b/t/5f0f53c91a35720fae014234/1594840010004/2.png"), linear-gradient(#231f45,#231f45,#231f45,#8d4755); background-size: 100%, cover; background-repeat: no-repeat; background-position: right top; background-size: contain, cover; } It does what I want it to (produce
  14. Site URL: https://rectangle-groundhog-le88.squarespace.com Hello! I have added a custom gradient to my site (7.1), but it seems to be above the header text, not behind it. Is there a way to push this behind the header text? My gradient code is: section[data-section-id="5ed8500211c9095175ac2e70"]::before { content: ''; width: 100%; height: 100%; background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,113,139,1) 100%); position: absolute; top: 0; left: 0; z-index: 3; } Thanks!
  15. Hello! Has anyone encountered problems with CSS gradients with percentage values disabling the Squarespace page edit buttons? As soon as I add percentage values I can no longer edit the pages – the edit buttons won't show up. Double-clicking the content (which usually enables the editing) won't work either. To replicate the problem, try this in the Custom CSS... .Footer { background-image: linear-gradient(135deg, #ece54c 0%, #46bdcf 75%); } Going back to Pages and reloading the site will stop the edit buttons from appearing. Removing the percentage values li
  16. Hi, I have worked out how to add a gradient to my buttons if they are solid, but I want the gradient to appear on the button's border when I have the design set to outline. Then I am hoping to have a hover effect on the button to show the full gradient. Is this possible? Thank you in advance for your help! Jenny
  17. Site URL: https://bumblebee-tuba-mxmm.squarespace.com/ I am trying to change the background of the Contact Us/Book a Demo section to a gradient. I found the section ID and have been playing around adding the below to the overall CSS with no luck. Obviously, I'm missing something! Any help would be appreciated!! I'm new to Squarespace but not CSS. Thanks in advance! [data-section-id="5ed929b20cfa72666c8da860"] .section-background { background-image: linear-gradient(to right top, #c028b9, #9a21b0, #731da4, #491998, #001689) !important;}
  18. Site URL: https://grape-plum-jrlb.squarespace.com I'm working with a difficult (busy) logo. I'm trying to find code for a transparent gradient behind the header. I've mocked it up in Illustrator to show what I'm looking for (attached). Has anyone been successful using custom code for this? I'm using the Grape Plum template. Site password is: PreviewER
  19. Hello everyone I have some trouble incorporating my gradient background css code into my site header. Here is my css code that is not working any help is appreciated: header#header { background-image: linear-gradient(to right top, #5aff3e, #00efa8, #00d6ee, #00b5ff, #128feb); }
  20. Site URL: https://clover-conch-hxxn.squarespace.com/ I want to create a left to right gradient overlay over a video header. Cant find anything on this. Attaching target goal.
  21. Site URL: https://silver-porcupine-gp5t.squarespace.com Hello Squarespace Community, I am building a site using version 7.1 and am very close to finishing it! One of my last orders of business is to add a gradient to the navigation bar. The catch is that I want the nav bar to be transparent at the top of the page and then the gradient to show up when you start scrolling on the page. The gradient should fade from orange (#FF8700) on the left to bright yellow on the right (#F7FF00). Any help is much appreciated!
  22. Hello guys, I am very new with using CSS Custom here. I have seen alot of tutorial for making a button gradient. However, I wish to make the button's border also gradient. I am attaching you my button design. Please let me know how if it possible. Or if there is anyway to replace the button with my own button design? Looking forward to hearing from you and thank you in advance, Chira
  • Create New...