CSS Gradients Rendering Incorrectly in Browser?

Question

I'm doing some custom coding in Squarespace. I am having a strange thing happen that I've never seen before. I am trying to add a hard-stop gradient mask to a div (textbox) so that I can create a wavy edge.

This is the code I put into the custom CSS (tested to be working in Codepen):

--mask:
  radial-gradient(8.20px at 50% 11.50px,#000 99%,#0000 101%) calc(50% - 10px) 0/20px 100%,
  radial-gradient(8.20px at 50% -6.5px,#0000 99%,#000 101%) 50% 5px/20px 100% repeat-x;
 -webkit-mask: var(--mask);
  mask: var(--mask);

But then I browse the inspector and observe that the browser changes the values and renders it differently in the preview (sorry, the site is currently unpublished so I cannot share the link):

--mask:
  radial-gradient(8.2px at 50% 11.5px,#000 99%,#000 0 101%) calc(40%) 0px 100%,
  radial-gradient(8.2px at 50% -6.5px,#000 0 99%,#000 101%) 50% .25px 100% repeat-x;
 -webkit-mask: var(--mask);
  mask: var(--mask);

And thus, the mask is not visible.

Has anyone run into this type of issue? How can I fix this?

it seems there is a building step or something that interpret 0px/20px as a division which is wrong. — Temani Afif
– Temani Afif, Commented Feb 23, 2024 at 23:43
It seems that squarespace has 'misinterpreted' several lthings here, both the / as division and the calc. This link recommends putting such code into a style block so squarespace wont attempt to interpret it. forum.squarespace.com/topic/… — A Haworth
– A Haworth, Commented Feb 24, 2024 at 19:55

Temani Afif · Accepted Answer · 2024-02-23 23:46:05Z

0

Another way to write the code and avoid issues:

.box {
-webkit-mask:
  radial-gradient(8.2px at 50% 11.5px,#000 99%,#0000 101%) -10px 0,
  radial-gradient(8.2px at 50% -6.5px,#0000 99%,#000 101%) 0 5px repeat-x;
 -webkit-mask-size: 20px 100%;
 
 
 background: red;
 height: 100px;
}

<div class="box"></div>

answered Feb 23, 2024 at 23:46

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hex1189 Over a year ago

Thank you so much! This worked for me after I found out there was also another problem compounded onto this rendering issue. It seems SquareSpace has some built-in CSS specificity problem (targeting the specific div/textbox wasn't enough) so I had to add the CSS inline via JS/jQuery.

Collectives™ on Stack Overflow

CSS Gradients Rendering Incorrectly in Browser?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related