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
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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.