最新
渐变Mesh Gradient Background
Three blurred radial pools over an opaque base - a mesh section that never has to fight its own text for contrast.
#gradient#mesh#background
6 个框架初级
Loading…
A hairline that fades out at both ends, with an optional soft glow - a breath between sections.
<!--
aria-hidden, not <hr>, on purpose: an <hr> announces "separator" to a screen
reader, and between two <section>s that is noise - the headings already
carry the structure. If the break IS semantic (say, the end of an article
before comments), drop aria-hidden and use a real <hr> instead.
-->
<div class="gradient-divider" aria-hidden="true">
<div class="gradient-divider__glow"></div>
<div class="gradient-divider__line"></div>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
glow | boolean | true | Glow |
className | string | - | 合并到根元素上的额外类名。 |
The fade at both ends is the whole design: a hairline that hits the container edge reads as a rule across the page, one that dissolves reads as a breath between sections. It is `aria-hidden` rather than an `<hr>` on purpose - an `<hr>` announces "separator" to a screen reader, and between two `<section>`s whose headings already carry the structure, that is noise. If the break is semantic (the end of an article before the comments), drop `aria-hidden` and use a real `<hr>`. The glow is a blurred radial gradient behind the line, togglable via the `glow` prop and recolourable in its `radial-gradient()` value; keep its alpha under ~0.25 or it stops being an accent and starts being a stain. Adjust the breathing room with the wrapper’s `py-6`.