IrisBackgroundsStriped Glow
Striped Glow
A soft orange glow held in one corner of a paper-white ground, finely ridged by thin vertical hairlines.
Striped Glow
A still corner treatment, not a live field: one contained radial glow — full warmth at its own centre, fading back to white well before any edge — with fine, low-opacity hairlines ruled through it every 65px. At native resolution the reference this was built from reads as a smooth blob with a subtle vertical grain, not a barcode of bold bars; a hard opacity mask over-states that grain into stripes the source doesn't have, so this stays soft.
No WebGL, no motion, no pointer — the reference is a still image, reproduced as one, tuned directly against its own pixel values (peak colour, glow position and fall-off measured, not eyeballed). Same fixed warm palette as `solar-fan`, `ember-ridge` and `spot-gel`, just held instead of animated.
Install
No installation needed — self-contained, paste-in code.
Usage
Drop it straight into a page.
import { StripedGlowField } from "./StripedGlowField";
export default function Example() {
return (
// Fills its nearest positioned ancestor (it renders itself `absolute
// inset-0`) — give it a sized, relatively positioned box.
<div className="relative isolate h-[32rem] w-full overflow-hidden rounded-2xl">
<StripedGlowField />
</div>
);
}Component
The real source, exactly as it ships.
/**
* A static paper-white field with one soft orange glow, finely ridged by
* thin vertical hairlines — reference: a real marketing hero's corner
* treatment. No WebGL, no motion, no pointer: the source is a still image,
* reproduced as one, tuned directly against its own pixel values (peak
* colour, glow position, and fall-off measured from the reference, not
* eyeballed).
*
* Two flat layers: a soft radial-gradient blob (the glow, contained —
* it fades to nothing well before either edge, not a wash across the
* whole box), and a `repeating-linear-gradient` of thin ridge lines on
* top, ~65px apart, running the full width — visible over bare white as
* well as over the glow, not just where the colour is. Each ridge pairs
* a bright glassy core with a faint shadow on either side (a real bevel,
* not a flat tint), which is what reads as "shiny" rather than chalky.
*/
export interface StripedGlowFieldProps {
className?: string;
}
const BLOB_GRADIENT =
"radial-gradient(20% 28% at 29% 33%, " +
"rgb(230,134,78) 0%, " +
"rgb(232,141,89) 12%, " +
"rgb(235,160,117) 24%, " +
"rgb(241,185,153) 38%, " +
"rgb(246,210,189) 50%, " +
"rgb(250,229,217) 63%, " +
"rgb(252,242,236) 75%, " +
"rgb(254,249,246) 88%, " +
"rgb(255,255,255) 100%)";
const SEAM_LINES =
"repeating-linear-gradient(90deg, " +
"transparent 0px, transparent 58px, " +
"rgba(0,0,0,0.06) 59.5px, " +
"rgba(255,255,255,0.85) 61px, " +
"rgba(0,0,0,0.05) 62.5px, " +
"transparent 64px, transparent 65px)";
export function StripedGlowField({ className }: StripedGlowFieldProps) {
return (
<div
className={`absolute inset-0 overflow-hidden${className ? ` ${className}` : ""}`}
style={{ backgroundColor: "#ffffff" }}
aria-hidden="true"
>
<div className="absolute inset-0" style={{ background: BLOB_GRADIENT }} />
<div className="absolute inset-0" style={{ background: SEAM_LINES }} />
</div>
);
}Custom work
Need one that isn't in the catalogue?
Describe what you're after and I'll reply by email — no promise on turnaround yet, this is a new channel, not a service with a set price or queue.
Fardin Omor Afnan
Reads and answers every request himself