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

Search the Community

Showing results for tags 'gradient'.

More search options

  • 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




Found 14 results

  1. 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 to apply a gradient - white to transparent - to the header section that has my nav bar and logo. Thanks so much.
  2. 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}
  3. 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/home pw: rotorsound The section with the instagram block should have the soft edge at the top. Thank You πŸ™πŸ™
  4. 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 a gradient background for the top section of a page): However, I would like this gradient to appear in the top section on every page of the website. Is it possible to achieve this without getting every data-section-id for each page? The site isn't big, but I would like it to work well for any new pages the client adds (mainly blog posts) without them having to edit the CSS each time. I've been searching for a couple of hours now (I like to fix things myself if I can) with no luck. Many thanks – Gareth
  5. 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!
  6. 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 like below will solve the issue... .Footer { background-image: linear-gradient(135deg, #ece54c, #46bdcf); } Adding a linear gradient with percentage values to text doesn't seem to cause a problem. p { border: none !important; background-image: linear-gradient(135deg, #ece54c 0%, #46bdcf 75%); } Does anyone have an explanation for this? Is this a bug or did I miss something? Thanks!
  7. 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
  8. 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 linear-gradient() instruction. However, the above code doesn't seem to work. I should add that I am also using javascript to create a parallax effect, which I am hoping isn't conflicting. Can anyone walk me through adding an additional element behind my text/image blocks and above my background to which I can add a gradient that shifts from white-to-transparent-to-white? Alternatively, can anyone show me how to make an image block flush with with the top of a section (so I can just stick a small PNG at the top and bottom of my sections and call it good)?
  9. 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;}
  10. 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
  11. 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); }
  12. 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.
  13. 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!
  14. 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...