Dec 13, 2025 · 2 min read · Let’s be honest — writing CSS gradients manually feels like solving a math problem you never signed up for.Angles, directions, color stops, percentages… one typo and your UI looks like a 2009 experiment gone wrong. That’s exactly why the CSS Gradient...
Join discussionAug 13, 2025 · 1 min read · ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 所謂的噪點漸層 (Grainy Gradients)，在顏色漸變時不是使用平滑過渡色彩，而是使用顆粒由多至少漸變，這樣的方式能夠製造出磨砂的質感，例如 Arc 瀏覽器的背景特效： 我看到一篇文章製作了很酷炫的噪點漸層，所以本篇文想要來研究一下，如何製作這樣的漸層： Grainy Gradients | CSS-Tricks - CSS-Tricks 他說道…
Join discussion
Jun 3, 2025 · 4 min read · Hey. I’m Emmanuel. I built a little app. Nothing super complex. It does one thing and it does it well (if I do say so myself). It’s called Gradie. Upload an image, and Gradie will get the five most prominent colours from that image and use them to cr...
Join discussion
Apr 8, 2025 · 5 min read · If you're just starting with web development and want to add eye-catching visual effects to your projects, animated gradients are a fun and beginner-friendly way to get started. In this tutorial, we'll learn how to create a beautiful 3-color gradient...
KRRaja and 1 more commented
Jan 10, 2025 · 3 min read · Full code example import React from 'react'; import { Percent, Heart, Star, Send } from 'lucide-react'; const GradientBorderExamples = () => { return ( <div className="space-y-8 p-6"> {/* Basic Button */} <div className="space-y-2"...
Join discussion
Nov 13, 2024 · 2 min read · Animating borders in CSS can bring your website elements to life, adding a subtle, interactive touch that enhances the user experience. In this article, we’ll explore the essentials of CSS border animations and see how to make them fun and accessible...
Join discussion
Sep 20, 2024 · 1 min read · ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 在平面設計中，還有一種很常見的漸層，既不是線性漸層，也不屬於圓形/圓錐漸層，是任意形狀漸層漸層，也有人稱之為流動 (Fluid gradient) 或暈染漸層，就像本系列文的封面圖。 這個封面我是使用 Figma 的套件「Noisy Gradients」產出的，另外這個套件還有在漸層上加上了噪點，讓平滑的顏色增添一點磨砂材質感覺。 不過先不論噪點，其實要製作這種背景很簡單，我們其實只要將東西模糊，並且把數值...
Join discussion
Sep 19, 2024 · 1 min read · ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 除了單純的漸層色外，漸層還能夠延伸畫出其他的圖案：如條紋、格子、點點、棋盤格背景等等，很神奇吧！這些特殊背景是我從一本 CSS 好書「CSS Secrets」中學到的，這本書裡面還有很多神奇 CSS 小知識，大家可以去借來看看。 延伸閱讀：csssecrets 不過因為書是 2016 年出的，有些語法當初不支援，但現在已支援了，本篇文章以現在的為主，省去了一些過去的作法。 在看本篇文章前，你要先會運用基本...
Join discussion
Sep 16, 2024 · 1 min read · ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 除了背景圖片，漸層色也是屬於 CSS 的背景一種，今天我們就來練習畫各種漂亮漸層吧！ 單純用漸層色就能夠表現出許多漂亮的視覺效果，例如模仿大自然中天空的顏色等等。 來源：27pt(クリスタ素材) / X ↓ 今日學習重點 ↓ 學會使用線性/放射/圓錐漸層 了解如何設定漸層的色彩空間 而在 CSS 中，漸層分為三種，分別是：線性、放射與圓錐漸層： 其實我們之前在特效文字的時候已經有偷偷...
Join discussion
Jun 28, 2024 · 5 min read · Gradients are gradual transition between two or more colors. They are used to create a smooth continuous change from one color to another. Gradients are used to add colored stripes and blends to backgrounds. They are usually treated as value to backg...
Join discussion