✓ 🍋
Menu
🍋 Peasy Tools
🍋 CSS Tools

CSS 阴影生成器

生成 CSS box-shadow 阴影效果

Free 仅在浏览器中 No sign-up
chars words sentences lines

Shadow Preset

结果

结果

关于 CSS 阴影生成器

生成 CSS box-shadow 阴影效果。可视化调整偏移、模糊、扩展和颜色。

工作原理

提供滑块和颜色选择器来可视化调整 box-shadow 的各个参数:水平偏移、垂直偏移、模糊半径、扩展半径和颜色。

分步教程

  1. 1 [
  2. 2 '
  3. 3 调
  4. 4 整
  5. 5 阴
  6. 6 影
  7. 7 偏
  8. 8 移
  9. 9 、
  10. 10 模
  11. 11 糊
  12. 12 和
  13. 13 扩
  14. 14 展
  15. 15 '
  16. 16 ,
  17. 17
  18. 18 '
  19. 19 选
  20. 20 择
  21. 21 阴
  22. 22 影
  23. 23 颜
  24. 24 色
  25. 25 和
  26. 26 透
  27. 27 明
  28. 28 度
  29. 29 '
  30. 30 ,
  31. 31
  32. 32 '
  33. 33 可
  34. 34 选
  35. 35 添
  36. 36 加
  37. 37 多
  38. 38 层
  39. 39 阴
  40. 40 影
  41. 41 '
  42. 42 ,
  43. 43
  44. 44 '
  45. 45 复
  46. 46 制
  47. 47 生
  48. 48 成
  49. 49 的
  50. 50
  51. 51 C
  52. 52 S
  53. 53 S
  54. 54
  55. 55 代
  56. 56 码
  57. 57 '
  58. 58 ]

提示

  • [
  • '
  • 柔
  • 和
  • 的
  • 阴
  • 影
  • 使
  • 用
  • 较
  • 大
  • 的
  • 模
  • 糊
  • 值
  • 和
  • 较
  • 低
  • 的
  • 透
  • 明
  • 度
  • 。
  • '
  • ,
  • '
  • 多
  • 层
  • 阴
  • 影
  • 可
  • 以
  • 模
  • 拟
  • M
  • a
  • t
  • e
  • r
  • i
  • a
  • l
  • D
  • e
  • s
  • i
  • g
  • n
  • 的
  • 高
  • 度
  • 效
  • 果
  • 。
  • '
  • ,
  • '
  • i
  • n
  • s
  • e
  • t
  • 阴
  • 影
  • 适
  • 合
  • 创
  • 建
  • 按
  • 下
  • 按
  • 钮
  • 的
  • 效
  • 果
  • 。
  • '
  • ]

常见问题