跳转到效果内容
TOMOYO
效果库
怎么用
See it. Try it. Make it.
EN
/
中文
分类 · 效果目录
全部效果
7
动画与交互
4
悬停浮起
柔和入场
套色印刷
海岸显影
材质与光影
1
磨砂玻璃
视觉风格
1
杂志编辑风格
布局与编排
1
便当盒布局
全部效果
材质与光影
磨砂玻璃
磨砂玻璃
Frosted glass
透出背景层次,文字依然清楚。
效果预览
提示词
分享效果
复制提示词
STAY
CURIOUS.
A little room
for what comes next.
悬停、聚焦或轻点卡片试试
调整效果
重置
从一个预设开始
磨砂
透亮
暖色
磨砂
透亮
暖色
调整后的参数会一起写进提示词。
表面质感
色调
纸色
冷色
暖色
纸色
冷色
暖色
模糊程度
px
表面不透明度
背景饱和度
边缘不透明度
圆角大小
px
阴影浓度
提示词语言
English
简体中文
背景模糊 18px、饱和度 1.15;前景内容保持清晰。
复制提示词
查看完整提示词
把这个效果用在你的项目里
提示词已包含当前参数,并要求 AI 沿用你项目里的内容和设计。
提示词 · English
Create a Frosted glass effect using my project's existing stack. Keep my content, typography, colors, and layout. Apply the effect to my existing card; do not recreate the Tomoyo demo artwork or add a component library. Use a frosted glass surface with background rgba(247, 232, 216, 0.86), backdrop-filter blur(18px) saturate(1.15), 8px corner radius, a 1px inset rgba(255, 249, 239, 0.7) border and shadow 0 20px 32px rgba(4, 25, 72, 0.32). Place a contrasting image behind it; keep foreground content sharp. At low opacity, add a local paper-colored backing beneath text for legibility. The border must not change layout. Fall back to opaque #f7e8d8 without backdrop-filter support. Replay returns to paper over 160ms, then transitions to glass over 320ms using cubic-bezier(0.16, 1, 0.3, 1). Keep the pointer hit area stationary and animate its inner visual surface. Continue from the current visual frame when switching effects; cancel superseded animations. Repeated Replay clicks during playback must not restart the animation or make it flash. Respect prefers-reduced-motion: skip movement and fades, show all content immediately, and retain a clear focus indicator. A glass surface may remain static. Support keyboard and touch input. Keep the animation local to this component. Implement the change, then tell me which parameters to adjust and how you verified the behavior.
全选文字
复制提示词
提示词 · EN
复制提示词