css text gradient, css fonts gradient .gradient-colors { background-image: linear-gradient(to left, violet, indigo, blue, g">
xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

css text gradient All In One

css text gradient All In One

<div class="gradient-colors">
    css text gradient, css fonts gradient
</div>


.gradient-colors {
    background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    // -webkit-background-size: 200% 100%;
}

online demo

bug, 文字过少,渐变看不到 ❓

linear-gradient


.colors {
  background: linear-gradient(135deg, #0f0, #f0f, #00f);
}


.colors {
  background: linear-gradient(to right bottom, #0f0, #f0f, #00f);
}

refs

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()



©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!


posted @   xgqfrms  阅读(45)  评论(8编辑  收藏  举报
编辑推荐:
· Brainfly: 用 C# 类型系统构建 Brainfuck 编译器
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
阅读排行:
· DeepSeek 全面指南,95% 的人都不知道的9个技巧(建议收藏)
· 对比使用DeepSeek与文新一言,了解DeepSeek的关键技术论文
· Brainfly: 用 C# 类型系统构建 Brainfuck 编译器
· DeepSeekV3+Roo Code,智能编码好助手
· AI编程:如何编写提示词
历史上的今天:
2020-11-21 Battery API All In One
2020-11-21 如何使用 js 的 Promise 实现 Fetch 请求超时自动重试 All In One
2019-11-21 HTML5 Server-Sent Events
2019-11-21 Learning React in depth with React Official Documents
2019-11-21 js in depth & prototype & __proto__
2018-11-21 Access-Control-Allow-Methods: OPTIONS & CORS All In One
2015-11-21 IcoMoon 图标字体 Custom built and crisp icon fonts, done right
点击右上角即可分享
微信分享提示