How would you go about making this divider fade affect in blocs?
I’d drop a png image in there. Probably better ways, but that’s my first thoughts.
Having fun in the CodePen play box again…
<section style="background: transparent; padding: 100px 0;">
<div class="svg-section-wrapper">
<svg id="animatedDivider" viewBox="0 0 400 60" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="reveal">
<rect id="clipRect" x="200" y="0" width="0" height="60">
<animate id="animX" attributeName="x" from="200" to="0" dur="1s" fill="freeze" begin="indefinite" />
<animate id="animW" attributeName="width" from="0" to="400" dur="1s" fill="freeze" begin="indefinite" />
</rect>
</clipPath>
<linearGradient id="gradBlue" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0099ff" stop-opacity="0" />
<stop offset="50%" stop-color="#0099ff" stop-opacity="1" />
<stop offset="100%" stop-color="#0099ff" stop-opacity="0" />
</linearGradient>
<linearGradient id="gradOrange" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff6600" stop-opacity="0" />
<stop offset="50%" stop-color="#ff6600" stop-opacity="1" />
<stop offset="100%" stop-color="#ff6600" stop-opacity="0" />
</linearGradient>
<linearGradient id="gradGreen" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#00cc66" stop-opacity="0" />
<stop offset="50%" stop-color="#00cc66" stop-opacity="1" />
<stop offset="100%" stop-color="#00cc66" stop-opacity="0" />
</linearGradient>
</defs>
<rect x="0" y="10" width="400" height="4" fill="url(#gradBlue)" clip-path="url(#reveal)" />
<rect x="0" y="30" width="400" height="4" fill="url(#gradOrange)" clip-path="url(#reveal)" />
<rect x="0" y="50" width="400" height="4" fill="url(#gradGreen)" clip-path="url(#reveal)" />
</svg>
</div>
</section>
<style>
.svg-section-wrapper {
max-width: 600px;
width: 100%;
margin: 0 auto;
}
svg {
width: 100%;
height: auto;
display: block;
}
</style>
<script>
const container = document.querySelector('.svg-section-wrapper');
const resetAndAnimate = () => {
const clipRect = document.getElementById("clipRect");
const animX = document.getElementById("animX");
const animW = document.getElementById("animW");
// Clone and replace the rect to restart the animation
const newClip = clipRect.cloneNode(true);
clipRect.parentNode.replaceChild(newClip, clipRect);
// Re-trigger animations
newClip.querySelectorAll("animate").forEach(anim => {
anim.beginElement();
});
};
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
resetAndAnimate();
}
});
}, { threshold: 0.5 });
observer.observe(container);
</script>
1 Like
I would do this with an image mask using just CSS, that makes it very flexible, you could even add a gradient to the line. The only con is Internet Explorer might not like you 
I just used red here, and added the class to a div.
You can learn more about image masks here
5 Likes
@Norm what is the inbuilt #nocode #blocsapp approach to this ? 
<!--
[Q:] How would you go about making this divider fade affect in blocs?
Typically this could be a single <hr> tag along with a background-image
with two linear-gradient’s with transparency at the edges and
a few other CSS settings. With this approach there is a lot of creative
freedom. Though without a <hr> Bric, or support for layered multiple
gradients via the CSS Editor.
No joy regarding #blocsapp #nocode.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hr tag with double faded lines (typical)</title>
<style>
/* no mask or double divs needed, and precise control of height, line thickness, gap */
hr.double-fade {
/* remove the default HR styles */
border: none;
padding: 0;
/* hr tags center inherently */
/* size the width if desired */
width: 50vw;
/* total height = 4 px 'height:' total − 1 px top − 1 px bottom = 2 px left between as gap */
height: 4px;
/* no tiling */
background-repeat: no-repeat;
/* each gradient is 100% wide and 1px tall */
background-size: 100% 1px, 100% 1px;
/* position one at top edge, one at bottom edge */
background-position: top, bottom;
/* two identical fading gradients, use whatever color method you like to replace black */
background-image:
linear-gradient(to right, transparent, black 50%, transparent),
linear-gradient(to right, transparent, black 50%, transparent);
}
/* but since Blocs does not have a hr tag Bric and the 'divider' Bric is convoluted */
.blocs-double-fade {
/* divs do not center inherently -- otherwise same as above */
margin: 0 auto;
width: 50vw;
height: 4px;
background-repeat: no-repeat;
background-size: 100% 1px, 100% 1px;
background-position: top, bottom;
background-image:
linear-gradient(to right, transparent, black 50%, transparent),
linear-gradient(to right, transparent, black 50%, transparent);
}
</style>
</head>
<body>
<p><code><hr></code> tag with custom double faded lines</p>
<hr class="double-fade">
<p><code><hr></code> tag default look out of the box</p>
<hr>
<p>no <code><hr></code> Bric in Blocs and the 'divider' Bric is convoluted, use a single <code><div></code> Bric</p>
<div class="blocs-double-fade"></div>
</body>
</html>You could just use a Divider Bric (or two in this case) and add a class that applies a Gradient Background using 3 points.
The left and right points have their opacity set to 0 and the middle one is set to a fill colour. Also set the angle to 90 to make it horizontal. This approach gives you control over the fade.
Here is the example project.
Faded Divider.bloc (32.1 KB)
I hope that helps.
5 Likes
Yep, thats as far as I got too.
The present divider bric at times sure takes some extra wrangling however, not like using a typical <hr> or a even a <div>. Or other creative initiatives by users …
Hopefully @ajenks can work with the divider bric for their desired esthetics with this prescribed inbuilt way.
That comment may be a bit dated now, the divider Bric has changed since the original one, which was a little more fiddly to style.
That’s what it is now, with a little CSS sprinkled on. 
1 Like
Pete seemed to have a good handle on it back then (same thread) and mentioned “divider-h” so yes it must have already been changed. Though he still suggested above using divs with a mask-image vs the divider bric and gradient via the Class Editor.
Seems like it’s not at all well known to users given the OG question. But I’m sure users wish many things could be expounded upon as it pertains to CSS through Blocs Bytes, Academy or the User Documentation. As a No-Code app its perhaps a high ask for some to understand and work with CSS / Classes / etc.
Regardless it would be a cascading “Div Fest” to do the things I can do with my approach singularly verse via a bunch of divs / dividers. 
I’m glad it changed although I never understood why it wasn’t a simple hr to begin with?
Yeah Norms method is the other way I would have done it then. I suggested the mask as it adds flexibility to do some fancy things and also expands the knowledge base to build more options.
AI’s response:
1. Diagonal Card Cuts
You can use a diagonal shape as a mask to make the feature card look slanted. Useful for dynamic or modern UI vibes, especially for portfolios or creative agencies.
Effect: A card or image with a diagonal top/bottom edge.
Use: Highlight services or team members with stylized layout.
2. Custom Icon Shapes
You can apply a circular, hexagonal, or blob-shaped mask over icons/images to break out of the traditional square/rectangle mold.
Effect: Icons or headshots appear in non-standard shapes.
Use: More engaging and playful design, great for creative brands.
3. Hover Animation with Mask Expansion
Combine the Feature Mask with hover interactions so that the mask expands or morphs when hovered over.
Effect: A growing circle or expanding diagonal when hovered.
Use: Interactive “Learn more” or “Read more” call-to-action cards.
4. Highlight Sectioning
Use feature masks as section dividers or highlights within a larger block (e.g., a series of features or pricing tables), helping them visually stand out.
Effect: Background mask creates focus and contrast.
Use: Draw attention to “Most Popular” or “New” items.
5. Image Reveal Masking
Apply a mask that only reveals a portion of the image, perhaps in a puzzle-like pattern, adding intrigue or motion (with animation).
Effect: Partial display of the image, revealing more on scroll or hover.
Use: Teasers for blog posts or portfolio items.
Pro Tips:
- Use the Class Editor to pair masks with transitions or effects (e.g., scale, skew, blur).
- Use SVG masks (imported as custom shapes) for more complex visuals.
- Stack masks with scroll FX for layered animation.
1 Like
Thats what I initially tried to do, but I could get it to work. I will try again. Thank you for the screenshot and the project file 
1 Like