Creating gradients with custom CSS

How Gradient Codes Work

Gradients are just smooth blends between two or more colors. Instead of one flat background color, you can have a background that fades from one color to another.

You can give just about anything in Squarespace a gradient background. A text block is a great example for trying a gradient effect using custom CSS.

Practice with this code in the custom CSS section of your website:

.sqs-block-html {
 background: #c31432;
 background: -webkit-linear-gradient(to left, #240b36,#c31432);
 background: linear-gradient(to left, #240b36, #c31432);
}

How to Write a Gradient Code

  • Start with a backup color
    Always set a single solid color first. If the gradient doesn’t load, the backup shows instead. Use a dark color if your text is light, or a light color if your text is dark.

  • Choose a direction
    Tell the browser which way the colors should flow. Examples:

    • to right (left → right)

    • to bottom (top → bottom)

    • 45deg (diagonal at a 45° angle)

  • Pick your colors
    You need at least 2 colors, separated by commas. You can add more, but keep in mind how much space you have for them to blend.

    • Example with hex codes: #ff0000, #0000ff

    • You can also use RGB, RGBA, or even named colors.

  • Write two lines for browser support
    Some browsers read gradients differently. That’s why you’ll often see both a -webkit-liner-gradient & linear-gradient in custom codes.

  • Optional extras

    • Color stops let you control where each color appears (red 20%, blue 50%).

    • Radial gradients create circular blends instead of straight lines.

FREE GRADIENT CODE GENERATORS

Here are a few of my favorite free gradient code generators.

Custom Codey is trained to help you create gradient codes for Squarespace!

Pro Tips for Custom Gradients

  • Keep contrast in mind → Make sure any text on top of your gradient is still easy to read. Dark text on a light section, or light text on a dark section, works best.

  • Subtle > busy → Two or three colors usually look smoother than cramming in a rainbow. If you want multiple colors, use stops to control where each one blends.

  • Try transparency → Using rgba() lets you add transparency so your gradient blends with a background image or color underneath, like this example:

    background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0));

  • Diagonal directions pop → A simple 45deg or 135deg direction can give your background extra energy without being overwhelming.

  • Match your brand colors → Gradients look best when they’re built with your existing color palette. Use your main brand color with a darker or lighter shade of the same hue.

  • Test on mobile → Gradients can look different on smaller screens, so always preview your design on phone and tablet views.