div+css布局立体文字阴影效果代码-html代码-BFW代码库

div+css布局立体文字阴影效果代码

代码语言：html

代码描述：div+css布局立体文字阴影效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">



    <style>
        :root {
          --color-primary: white;
          --color-surface: #030303;
        }
        
        .container {
          font-size: 58vmin;
          position: absolute;
          display: grid;
          place-items: center;
          font-family: "Rajdhani", sans-serif;
          font-weight: bold;
          text-align: center;
          background: conic-gradient(#f6a2f6, #e74f89, #7e7ecb, #ffd500, #ee75d2, #13f5fa, #f6a2f6);
          -webkit-background-clip: text;
                  background-clip: text;
          -webkit-text-fill-color: transparent;
          text-fill-color: transparent;
        }
        .container::before {
          content: "CSS";
          position: absolute;
          inset: 0;
          color: transparent;
          --c: color-mix(in srgb, white, transparent 94%);
          --c2: var(--color-surface);
          text-shadow: -5vmin 3.3333333333vmin 0.01vmin var(--c2), -4.75vmin 3.1666666667vmin 0.1vmin rgba(255, 255, 255, 0.9), -4.5vmin 3vmin 0.025vmin var(--c), -4.25vmin 2.8333333333vmin 0.025vmin var(--c), -4vmin 2.6666666667vmin 0.025vmin var(--c), -3.75vmin 2.5vmin 0.025vmin var(--c), -3.5vmin 2.3333333333vmin 0.025vmin var(--c), -3.25vmin 2.1666666667vmin 0.025vmin var(--c), -3vmin 2vmin 0.025vmin var(--c), -2.75vmin 1.8333333333vmin 0.025vmin var(--c), -2.5vmin 1.6666666667vmin 0.025vmin var(.........完整代码请登录后点击上方下载按钮下载查看