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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/15586085.html
未经授权禁止转载,违者必究!
标签:
CSS
, fonts
, gradient
, gradient background
, gradient color
, gradient text
, linear-gradient
, text gradient
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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