#gradients-in-css articles

ABAkash Bijwedevutilx.hashnode.devDec 13, 2025 · 2 min read

CSS Gradient Generator — Beautiful Gradients Without CSS Headaches 🎨🔥

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...

0

YCYI-LIN CHEN (Eva)im1010ioio.hashnode.devAug 13, 2025 · 1 min read

#48 CSS 噪點漸層 (Grainy Gradients) 的製作方法

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。所謂的噪點漸層 (Grainy Gradients)，在顏色漸變時不是使用平滑過渡色彩，而是使用顆粒由多至少漸變，這樣的方式能夠製造出磨砂的質感，例如 Arc 瀏覽器的背景特效：我看到一篇文章製作了很酷炫的噪點漸層，所以本篇文想要來研究一下，如何製作這樣的漸層： Grainy Gradients | CSS-Tricks - CSS-Tricks 他說道…

0

ECEmmanuel C. Jemenijemeni11.hashnode.devJun 3, 2025 · 4 min read

Why Gradie's colour switcher does two things at once (and why that's not a bug)

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...

0

AArjunechoesofping.hashnode.devApr 8, 2025 · 5 min read

🌈 How to Create a 3-Color Gradient Background Animation Using HTML and CSS (With Source Code)

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...

2

KR

FHForhad Hossaincodeforhad.hashnode.devJan 10, 2025 · 3 min read

Creating Beautiful Animated Gradient Border Components in React

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"...

0

NFNehal Fathemasafaranokhi.hashnode.devNov 13, 2024 · 2 min read

Adding Life to Your Borders: CSS Border Animations

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...

0

YCYI-LIN CHEN (Eva)im1010ioio.hashnode.devSep 20, 2024 · 1 min read

#40 使用 CSS filter blur 製作簡易的任意形狀漸層 (流動/暈染背景)

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。在平面設計中，還有一種很常見的漸層，既不是線性漸層，也不屬於圓形/圓錐漸層，是任意形狀漸層漸層，也有人稱之為流動 (Fluid gradient) 或暈染漸層，就像本系列文的封面圖。這個封面我是使用 Figma 的套件「Noisy Gradients」產出的，另外這個套件還有在漸層上加上了噪點，讓平滑的顏色增添一點磨砂材質感覺。不過先不論噪點，其實要製作這種背景很簡單，我們其實只要將東西模糊，並且把數值...

0

YCYI-LIN CHEN (Eva)im1010ioio.hashnode.devSep 19, 2024 · 1 min read

#39 CSS 幾何背景：條紋、格子、點點、棋盤格子背景 (CSS background)

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。除了單純的漸層色外，漸層還能夠延伸畫出其他的圖案：如條紋、格子、點點、棋盤格背景等等，很神奇吧！這些特殊背景是我從一本 CSS 好書「CSS Secrets」中學到的，這本書裡面還有很多神奇 CSS 小知識，大家可以去借來看看。延伸閱讀：csssecrets 不過因為書是 2016 年出的，有些語法當初不支援，但現在已支援了，本篇文章以現在的為主，省去了一些過去的作法。在看本篇文章前，你要先會運用基本...

0

YCYI-LIN CHEN (Eva)im1010ioio.hashnode.devSep 16, 2024 · 1 min read

#37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。除了背景圖片，漸層色也是屬於 CSS 的背景一種，今天我們就來練習畫各種漂亮漸層吧！單純用漸層色就能夠表現出許多漂亮的視覺效果，例如模仿大自然中天空的顏色等等。來源：27pt(クリスタ素材) / X ↓ 今日學習重點 ↓ 學會使用線性/放射/圓錐漸層了解如何設定漸層的色彩空間而在 CSS 中，漸層分為三種，分別是：線性、放射與圓錐漸層：其實我們之前在特效文字的時候已經有偷偷...

0

KOKemi Owoyelekemi-owoyele.hashnode.devJun 28, 2024 · 5 min read

Mastering Gradients in CSS: A Beginner's Guide

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...

0

#gradients-in-css

#gradients-in-css

Explore Hashnode

Trending tags this week

CSS Gradient Generator — Beautiful Gradients Without CSS Headaches 🎨🔥

#48 CSS 噪點漸層 (Grainy Gradients) 的製作方法

Why Gradie's colour switcher does two things at once (and why that's not a bug)

🌈 How to Create a 3-Color Gradient Background Animation Using HTML and CSS (With Source Code)

Creating Beautiful Animated Gradient Border Components in React

Adding Life to Your Borders: CSS Border Animations

#40 使用 CSS filter blur 製作簡易的任意形狀漸層 (流動/暈染背景)

#39 CSS 幾何背景：條紋、格子、點點、棋盤格子背景 (CSS background)

#37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)

Mastering Gradients in CSS: A Beginner's Guide

#gradients-in-css

Search Hashnode

#gradients-in-css

Explore Hashnode

Trending tags this week

CSS Gradient Generator — Beautiful Gradients Without CSS Headaches 🎨🔥

#48 CSS 噪點漸層 (Grainy Gradients) 的製作方法

Why Gradie's colour switcher does two things at once (and why that's not a bug)

🌈 How to Create a 3-Color Gradient Background Animation Using HTML and CSS (With Source Code)

Creating Beautiful Animated Gradient Border Components in React

Adding Life to Your Borders: CSS Border Animations

#40 使用 CSS filter blur 製作簡易的任意形狀漸層 (流動/暈染背景)

#39 CSS 幾何背景：條紋、格子、點點、棋盤格子背景 (CSS background)

#37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)

Mastering Gradients in CSS: A Beginner's Guide