Feed
Discussions

gradients in CSS

gradients in CSS

#gradients-in-css

1 followers·19 articles

gradients in CSS

#gradients-in-css·1 followers·19 articles

gradients in CSS

Changelog

New steps component and improved accessibility on Hashnode's blog and docs product.

Nov 05, 2024·

new

Trending Articles

STONfiRe Contest: Why Fair Play Matters

VANCE 💎·40 reads

The Role of NIP-20 in Strengthening NuDEX’s Security

aaron ubokobong·24 reads

Explorer le Staking Abstraction Layer (SAL) de Solv Protocol : Libérez le Potentiel du Staking Bitcoin

WEALTH 💎·33 reads

Top commenters this week

Writing Challenges

#2Articles1Week Challenge

Become better at technical writing; accept Hashnode's writing challenge for four weeks.

#2Articles1Week Challenge

#WomenWhoTech

Share your story, achievements, or experiences as a woman, non-binary folk in tech or as a #WomenWhoTech ally!

#WomenWhoTech

Self Starter

Publish your first article on Hashnode and become a self starter!

Self Starter

Serial Blogger

Publish an article every day for 7 days and earn a cool serial blogger badge!

Serial Blogger

Talk of the town

Write a story that drives amazing engagement on Hashnode and become the talk of the town!

Talk of the town

Word Warrior

Write an in-depth article on your Hashnode blog that's more than 2000 words and become a word warrior!

Word Warrior

Poonam Thakur

Arkadipta Kundu

Arkadipta Kundu

Okhiria Tehilah Ebehireime

Okhiria Tehilah Ebehireime

Shaydee Coder

Aakarsh Verma

Forhad Hossain

codeforhad.hashnode.dev·Jan 10, 2025

Jan 10, 2025

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

Creating Beautiful Animated Gradient Border Components in React

Discuss·6 reads

gradients in CSS

Michael Andreuzza

Michael Andreuzza

michaelandreuzza.hashnode.dev·Dec 16, 2024

Dec 16, 2024

We have built a new tool to create background and text gradients with Tailwind CSS

Make Tailwind CSS Gradients the Easy Way Working with Tailwind CSS is awesome, but creating gradients for backgrounds or text can sometimes be a bit tricky. That’s where the Tailwind CSS Gradient Generator comes in! This handy tool helps you design g...

We have built a new tool to create background and text gradients with Tailwind CSS

Discuss·1 read

Nehal Fathema

safaranokhi.hashnode.dev·Nov 13, 2024

Nov 13, 2024

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

Adding Life to Your Borders: CSS Border Animations

Discuss·3 reads

Eva Chen

im1010ioio.hashnode.dev·Sep 20, 2024

Sep 20, 2024

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

↓ 今日學習重點 ↓ 學習 CSS filter blur() 特效使用偽元素 ::before / ::after 製作裝飾元素使用 box-shadow 製作裝飾元素在平面設計中，還有一種很常見的漸層，既不是線性漸層，也不屬於圓形/圓錐漸層，是任意形狀漸層漸層，也有人稱之為流動 (Fluid gradient) 或暈染漸層，就像本系列文的封面圖。這個封面我是使用 Figma 的套件「Noisy Gradients」產出的，另外這個套件還有在漸層上加上了噪點，讓平滑的顏色增...

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

Discuss·215 reads

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯

Eva Chen

im1010ioio.hashnode.dev·Sep 19, 2024

Sep 19, 2024

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

↓ 今日學習重點 ↓ 學會繪製各種條紋、格子背景學會繪製各種點點背景學會繪製各種棋盤格背景除了單純的漸層色外，漸層還能夠延伸畫出其他的圖案：如條紋、格子、點點、棋盤格背景等等，很神奇吧！這些特殊背景是我從一本 CSS 好書「CSS Secrets」中學到的，這本書裡面還有很多神奇 CSS 小知識，大家可以去借來看看。延伸閱讀：csssecrets 不過因為書是 2016 年出的，有些語法當初不支援，但現在已支援了，本篇文章以現在的為主，省去了一些過去的作法。在看本篇文章...

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

Discuss·48 reads

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯

Eva Chen

im1010ioio.hashnode.dev·Sep 16, 2024

Sep 16, 2024

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

↓ 今日學習重點 ↓ 學會使用線性/放射/圓錐漸層了解如何設定漸層的色彩空間除了背景圖片，漸層色也是屬於 CSS 的背景一種，今天我們就來練習畫各種漂亮漸層吧！單純用漸層色就能夠表現出許多漂亮的視覺效果，例如模仿大自然中天空的顏色等等。來源：27pt(クリスタ素材) / X 而在 CSS 中，漸層分為三種，分別是：線性、放射與圓錐漸層：其實我們之前在特效文字的時候已經有偷偷用過了一些了，只不過沒有深入探討。延伸閱讀：#29 CSS 立體字、霓虹字、外框字、漸層字...

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

Discuss·24 reads

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯

Kemi Owoyele

kemi-owoyele.hashnode.dev·Jun 28, 2024

Jun 28, 2024

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

Mastering Gradients in CSS: A Beginner's Guide

Discuss·6 reads

Gorithm

gorithm.hashnode.dev·Feb 16, 2024

Feb 16, 2024

Create a Gradient Border with CSS [Just 2 Lines]

The Problem with border-color and border-image: When you try to add a gradient as a property value to the border-color or to the border itself (same) you will see nothing, the border is completely vanished, this happens because CSS border property do...

Create a Gradient Border with CSS [Just 2 Lines]

Discuss·9 reads

himanshu

gopalkdwivedi.hashnode.dev·Nov 20, 2023

Nov 20, 2023

Gradients / transition in css (lt.19)

CSS gradients are a way to display smooth transitions between two or more specified colors. They are a powerful tool for applying dynamic effects on web pages. To apply gradient we have to use background image. There are three primary types of gradie...

Gradients / transition in css (lt.19)

Discuss·10 likes·7 reads

gradients in CSS

Arindam Chowdhury

Arindam Chowdhury

arindamchowdhury.hashnode.dev·Sep 20, 2023

Sep 20, 2023

How to Make Your Website Pop with a Floating Gradient Blob in the Background

Have you ever visited a website and been mesmerized by a beautifully designed background that seems to flow and morph like a floating blob? If you're looking to add a touch of creativity and uniqueness to your web projects, you might want to conside...

How to Make Your Website Pop with a Floating Gradient Blob in the Background

Discuss·524 reads