在瀏覽器中即時執行此工具，無需註冊且不需伺服器處理。
工具信任狀態
此工具的輸入與輸出會在目前瀏覽器中處理。
- 瀏覽器本地此工具的輸入與輸出會在目前瀏覽器中處理。
- 離線能力應用載入後，核心處理不需要網路也能執行。
- 一般輸入此工具未標記為敏感輸入工具。
- DevTools 檢查使用工具時開啟 Network 面板以驗證請求。
喜歡這個工具？
安裝 byteflow.tools 可更快啟動，並離線存取瀏覽器本地工具。外部請求工具在執行查詢操作時仍需要網路。
安裝指南工具信任狀態
此工具的輸入與輸出會在目前瀏覽器中處理。
喜歡這個工具？
安裝 byteflow.tools 可更快啟動，並離線存取瀏覽器本地工具。外部請求工具在執行查詢操作時仍需要網路。
安裝指南透過即時預覽調整 iOS 陰影屬性與 Android elevation，並複製可用的 StyleSheet。
依據陰影顏色、位移、透明度、模糊半徑與 elevation 產生 React Native 卡片陰影設定，並提供即時預覽。
同時輸出 iOS 的 `shadowColor`、`shadowOffset`、`shadowOpacity`、`shadowRadius`。
同步提供 Android `elevation`，讓跨平台陰影設定可以一起調整。
右側會用 CSS 盒陰影模擬卡片效果，方便先做視覺比對。
柔和卡片
shadowColor=#0f172a, x=0, y=10, opacity=0.20, radius=16, elevation=12
淺層陰影
shadowColor=#111827, x=0, y=4, opacity=0.15, radius=8, elevation=4
大圓角卡片
borderRadius=16, cardColor=#ffffff, background=#e2e8f0
iOS 片段
shadowColor: '#0f172a',
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.20,
shadowRadius: 16.0,Android 片段
elevation: 12,
完整 StyleSheet
const styles = StyleSheet.create({
card: {
backgroundColor: '#ffffff',
borderRadius: 16,
shadowColor: '#0f172a',
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.20,
shadowRadius: 16.0,
elevation: 12,
},
});只調整 iOS 陰影，忘了同步 Android elevation
兩邊一起看，避免 iOS 與 Android 層級感落差太大。
透明度太低或半徑太小，陰影幾乎不可見
同時增加 `shadowOpacity` 與 `shadowRadius`，再看預覽卡片是否足夠。
直接把網頁預覽效果等同於真機效果
CSS 預覽只供快速比對，正式值仍要在真機上微調。
如需了解統一的隱私術語、本地處理模式、外部請求標記和 DevTools 驗證流程，請查看信任中心。
React Native 陰影產生器適合快速找出跨平台基準值；要達到最終視覺一致，仍需在真機上做最後微調。
為什麼右側預覽和手機上看起來不完全一樣？
因為右側使用 CSS 盒陰影近似模擬，實際效果仍受平台渲染差異影響。
可以直接複製到 React Native 專案嗎？
可以，輸出就是 `StyleSheet.create()` 片段；你只需要貼回元件樣式即可。
陰影顏色一定要跟卡片文字顏色一致嗎？
不一定，通常會使用較深且低透明度的中性色，避免陰影帶入過多彩色偏移。