Jump to content

How to Add Color Gradient to Line Block in Squarespace?

Recommended Posts

On 12/9/2021 at 11:13 AM, Sensebellum said:

Figured it out!

Used this resource and put it in a code-block.

Might have to ensure it works in all browsers but it's a start!

<style>
#grad1 {
    height: 2px; 
    background: linear-gradient(to right ,#C94127, #EF7F25,#E5DC38,#34B44A,#4E68EA);
}

  </style>

  <div id="grad1"></div>

 

 

I'd like to apply this to just one line block. Any suggestions?

Edited by Poppyseeds
question was inside instead of outside the quote
Link to comment
On 12/11/2021 at 12:53 PM, Poppyseeds said:

 

I'd like to apply this to just one line block. Any suggestions?

Which line block you want to apply? Can you share link? We can help easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
10 hours ago, tuanphan said:

Which line block you want to apply? Can you share link? We can help easier

I placed this code in a Code Block, but no line appears at all. 

Here's what used:

<!DOCTYPE html>
<html>
<head>
<style>
#grad3 {
  height: 5px;
    background-image: linear-gradient (to right, #9400D3, #4B0082, #0000FF,#00FF00, #FFFF00 ,#FF7F00, #FF0000);
}
</style>
</head>
<body>

<div id="grad3"></div>

</body>
</html>

I tried different gradient types, such as radial, but nothing.

What am I doing wrong? 

Link to comment

 

Poppyseeds, I could not get your code to function. This code works in a code block set for HTML. Before you post the code, remove the default code line that is there in the block by default. 

<style>
#grad1 {
    height: 2px; 
    background: linear-gradient(to right ,#C94127, #EF7F25,#E5DC38,#34B44A,#4E68EA);
}

  </style>

  <div id="grad1"></div>
Edited by derricksrandomviews
Link to comment

The critical syntax error is linear-gradient (. Notice the space before the open paren. CSS doesn't like that. It wants linear-gradient(. There are also some unneeded tags. SS cleans those out for you but you don't need 'em.

 Following is the cleaned up code.

<style>

  #grad3 {
  
    background-image : linear-gradient( to right, #9400D3, #4B0082, #0000FF, #00FF00, #FFFF00, #FF7F00, #FF0000 );
    height : 5px;
    
    }
    
  </style>

<div id="grad3">

  </div>

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
31 minutes ago, creedon said:

The critical syntax error is linear-gradient (. Notice the space before the open paren. CSS doesn't like that. It wants linear-gradient(. There are also some unneeded tags. SS cleans those out for you but you don't need 'em.

 Following is the cleaned up code.

<style>

  #grad3 {
  
    background-image : linear-gradient( to right, #9400D3, #4B0082, #0000FF, #00FF00, #FFFF00, #FF7F00, #FF0000 );
    height : 5px;
    
    }
    
  </style>

<div id="grad3">

  </div>

Let us know how it goes.

 

IT WORKED! 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.