Riso Kit Shadow

Live preview

The shadow above is the actual Riso Kit shader rendered behind the card — dots, colors, shape, and noise all carry through. Try a different dot shape to feel how it changes the texture.

The PNG-as-shadow recipe

For the real gradient-as-shadow effect (the one in the preview above): export the gradient as a PNG and use it as the background of a pseudo-element positioned behind your card. Pure CSS once you have the asset — no library required.

1. Open the playground and design your gradient
2. In the Export panel, choose PNG at the size you need (HD is fine for a card; 4K for hero sections)
3. Drop the PNG into your project
4. Apply the CSS below

.my-card {
  position: relative;
  isolation: isolate;
}
.my-card::before {
  content: "";
  position: absolute;
  inset: 20px -30px -30px -30px;
  z-index: -1;
  background: url("/riso-kit.png") center / cover no-repeat;
  mask-image: radial-gradient(ellipse 60% 50% at center, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at center, #000 30%, transparent 90%);
  opacity: 0.85;
  pointer-events: none;
}

The radial mask fades the edges so the gradient reads as a soft glow rather than a hard rectangle. Tune the inset values to shift the shadow direction.

Lightweight CSS alternative

If you don't want to host a PNG, the playground also exports a multi-layer box-shadowthat approximates the gradient glow using only your gradient's colors. No dots and no texture — just colored soft shadows — but it weighs nothing and works on any element.

In the Export panel, switch to Code → CSS and click Copy shadow CSS:

box-shadow:
  0px 23px 60px -15px #7359f299,
  14px 30px 65px -15px #fa59807d,
  0px 38px 70px -15px #ffeb4062,
  -13px 30px 74px -15px #33d9f246;

.my-card {
  box-shadow:
    0px 23px 60px -15px #7359f299,
    14px 30px 65px -15px #fa59807d,
    0px 38px 70px -15px #ffeb4062,
    -13px 30px 74px -15px #33d9f246;
}

Defaults

The current Code → CSS export uses these shadow defaults:

• Offset Y: 30px
• Blur: 60px
• Intensity: 60% opacity

When the dedicated Shadow tab returns, you'll be able to tune these per-export with live preview.

Coming soon — the component version

The PNG recipe above works today but the asset is static — you have to re-export when settings change. The <RisoKitShadow> React component (shipping with the v1 library) renders the live shader behind your element so the shadow can be tuned at runtime, theme-aware, or even animated. Same visual as the preview at the top of this page — no PNG handling, no asset pipeline.