【CSS】如何写渐变色文字并且有打光效果

效果如上,其实核心除了渐变色文字的设置

css 复制代码
 background: linear-gradient(270deg, #d2a742 94%, #f6e2a7 25%, #d5ab4a 48%, #f6e2a7 82%, #d1a641 4%);
 color: #e8bb2c;
 background-clip: text;
 color: transparent;

还有就是打光效果,原理其实就是两块遮罩,如下👇

完整代码

自己再根据自己需求调整下就行

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Draw a Ball</title>
    <style>
      /* From Uiverse.io by Spacious74 */
      .outer {
        width: 300px;
        height: 250px;
        border-radius: 10px;
        padding: 1px;
        background: radial-gradient(circle 230px at 0% 0%, #ffffff, #0c0d0d);
        position: relative;
      }

      .card {
        z-index: 1;
        width: 100%;
        height: 100%;
        border-radius: 9px;
        border: solid 1px #202222;
        background-size: 20px 20px;
        /* background: radial-gradient(circle 280px at 0% 0%, #fef3ef, #0c0d0d); */
        background-color: #fef3ef;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-direction: column;
        color: #fff;
      }
      .ray {
        width: 200px;
        height: 45px;
        border-radius: 100px;
        position: absolute;
        background-color: red;
        background-color: #fff;
        opacity: 0.4;
        box-shadow: 0 0 50px #fff;
        filter: blur(10px);
        transform-origin: 10%;
        top: 0%;
        left: -54px;
        transform: rotate(46deg);
      }
      .ray2 {
        width: 200px;
        height: 45px;
        border-radius: 100px;
        position: absolute;
        background-color: red;
        background-color: #fff;
        opacity: 0.4;
        box-shadow: 0 0 50px #fff;
        filter: blur(10px);
        transform-origin: 10%;
        top: 0%;
        left: 54px;
        transform: rotate(46deg);
      }

      .card .text {
        font-weight: bolder;
        font-size: 4rem;
        background: linear-gradient(270deg, #d2a742 94%, #f6e2a7 25%, #d5ab4a 48%, #f6e2a7 82%, #d1a641 4%);
        color: #e8bb2c;
        background-clip: text;
        color: transparent;
      }

      .line {
        width: 100%;
        height: 1px;
        position: absolute;
        background-color: #2c2c2c;
      }

    </style>
  </head>
  <body>
    <div class="outer">
      <div class="card">
        <div class="ray"></div>
        <div class="ray2"></div>
        <div class="text">No.27</div>
      </div>
    </div>
  </body>
</html>
相关推荐
小政爱学习!19 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。24 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼30 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093334 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石2 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程2 小时前
【前端基础】CSS基础
前端·css