Minimal Pricing Table - Gradient Version

Install Steps

Minimal Pricing Table - Gradient Version

Submitted by Moov Labs Works with all template families


Step One

Add a Markdown Block to the page you’d like your pricing table on.


Step Two

Copy and paste the text below into the Markdown Block and enter your info accordingly.

Be sure to add a hyperlink link to the text you’ve entered in place of Button Link Text. This will become your call to action button.

Save the page when done.

Plan Title Here


Plan Feature 1

Plan Feature 2

Plan Feature 3

Plan Feature 4

Button Link Text

Step Three

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Four

Copy and paste the code below into the Custom CSS Editor box.

// Gradient Minimal Pricing Table //

.sqs-block-markdown {
  max-width: 400px;
  background: -webkit-linear-gradient(to top, #F07C63, #E45372);
  background: linear-gradient(to top, #F07C63, #E45372);
  border: #FFFFFF 1px solid;
  border-radius: 10px;
  padding: 40px !important;
  margin: 20px;
  text-align: center;

// Pricing Table Plan Title //

.sqs-block-markdown h2 {
  color: #FFFFFF;
  font-size: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 20px 30px 35px 30px;

// Pricing Table Plan Price //

.sqs-block-markdown h1 strong {
  font-size: 55px;
  line-height: 20px;
  font-weight: 200;
  color: #FFFFFF;

.sqs-block-markdown h1 {
  font-weight: 200;
  font-size: 22px;
  padding-left: 25px;
  padding-top: 0px;
  padding-bottom: 10px;
  margin: 0px;
  color: #FFFFFF;

// Pricing Table List //

.sqs-block-markdown  p {
  padding: 30px 30px 10px 30px;
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 20px;
  color: #FFFFFF;

// Pricing Table Button //

.sqs-block-markdown a {
  font-weight: 400;
  text-transform: uppercase;
  display: inline-block;
  border: 2px solid white !important;
  padding: 10px 35px !important;
  background: none;
  color: #FFFFFF !important;

.sqs-block-markdown a:hover {
  color: #FFFFFF !important;
  background: #000000;
  border: 2px solid #000000 !important;
  -webkit-transition: all .15s ease-out;
  -moz-transition: all .15s ease-out;
  -ms-transition: all .15s ease-out;
  -o-transition: all .15s ease-out;
  transition: all .15s ease-out;

// Mobile Pricing Table //

@media (max-width : 667px) { .sqs-block-markdown {
  h2 {
    font-size: 20px !important;
  .sqs-block-markdown h1 {
    font-size: 18px !important;
  strong {
    font-size: 40px !important;

Step Five

There are quite a few values you can change, so we sectioned them so they are easier to find.

  • Pricing Table Box: Adjust the gradient background, border top, border, border radius, max width, and text alignment to your liking.

  • Zig Zag Line: You can swap out the line with your own graphic by replacing the image url.

  • Title, Price, and List: You can change any of these values to target font size, color, spacing, and more.

  • Button: Adjust the background, color, border radius, and padding to modify the call to action button.

  • Button on Hover: Adjust the background, color, and border color to modify the call to action button when hovered over.

  • To change the font families, go to Site Styles and edit the header 1, header 2, and body text settings.

Save and refresh the page. 👍

Moov Labs