Figma按钮设计转CSS后效果不符，求问题排查与解决方法

核心问题点 #

• 容器垂直对齐错误：div的align-items: left是无效属性值，应改为align-items: center才能实现按钮垂直居中；同时未给html和body设置高度，导致div的height: 100%不生效，按钮无法在页面中垂直居中。
• 按钮文字垂直偏移：button的line-height: 23px远小于按钮高度64px，导致文字偏上，无法垂直居中。
• 背景混合模式未生效：background-blend-mode: soft-light需要搭配基础背景色使用，仅设置渐变无法触发混合效果。
• 视觉质感缺失：Figma导出的阴影顺序在浏览器中需调整，且缺少玻璃态效果必备的模糊滤镜，导致视觉差异。

修正后的代码 #

HTML #

<div>
  <button>Wednesday</button>
</div>

CSS #

/* 确保根元素占满视口高度 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  display: flex;
  justify-content: center;
  align-items: center; /* 修正垂直对齐方式 */
  height: 100%;
}

button {
  width: 300px;
  height: 64px;
  border: none;
  /* 用flex实现文字精准居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.666667px;
  color: #000000;
  font-weight: 400;
  font-size: 16px;
  /* 添加基础背景色，触发混合模式 */
  background: #ffffff;
  background-image: linear-gradient(135.37deg, rgba(0, 0, 0, 0.35) 4.29%, rgba(255, 255, 255, 0.35) 95.6%);
  background-blend-mode: soft-light;
  /* 调整阴影顺序，增强层级感 */
  box-shadow: 
    -5px -5px 10px #FAFBFF,
    5px 5px 10px rgba(190, 106, 255, 0.3),
    0px 0px 4px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  /* 添加玻璃模糊效果，贴近Figma设计质感 */
  backdrop-filter: blur(10px);
}

效果说明 #

• 修正容器高度与对齐属性后，按钮会在页面中垂直水平居中。
• 通过flex布局实现文字精准居中，避免line-height适配问题。
• 添加基础背景色后，soft-light混合模式会正确作用于渐变与底色，还原设计图的色彩混合效果。
• 调整阴影顺序并添加backdrop-filter，模拟Figma中的玻璃态模糊质感，缩小视觉差异。

内容的提问来源于stack exchange，提问作者Noor