CSS / WEB DESIGN TREND 2026
BRUTALISM
IS NOT DEAD.
這是一場對精緻、圓潤與漸層審美疲勞的視覺起義。新粗野主義(Neo-Brutalisim)帶回了厚重的邊框、極致的高對比純色、生硬的物理陰影,以及毫無妥協的絕對直角。
視覺實驗沙盒
點擊下方按鈕或拉動調整,即可看見全網頁元素同步產生化學變化。體驗極致硬派的網頁美學。
迷你復古合成器 (點擊發聲)
01 / INTERACTIVE LAB 參數實驗室
實驗控制台
* 壓平:點擊時元素下沉並壓平陰影。
* 抬起:點擊時元素向左上抬升,陰影向右下擴大。
調色盤快選
Generated CSS Code
下方展示的是您透過滑桿即時計算出的新粗野主義 CSS 配置。您可以直接將其複製並貼入您個人的專案中:
/* 載入中... */
// 調整上方參數可以即時渲染全網頁!
NEO_CSS_GEN.v1
02 / THE COMPONENT ZOO 組件大觀園
ARTICLE
2026/06
對比度的極致浪漫
新粗野主義排斥柔和與漸層,堅持高明度與大色塊的猛烈碰撞。這種設計能第一時間抓住訪客眼球。
NEWSLETTER
訂閱我們的電報
INTERACTIONS
按鈕按壓回饋
點擊體驗不同的物理反饋與音效。每個顏色的按鈕都有其專屬的聲效頻率喔!
實時系統進度與監測
新粗野主義進度條採用了粗黑框與不帶圓角的色塊填充,呈現原始科技感。
處理器負載 CPU LOAD
82%
記憶體分配 RAM ALLOCATION
45%
美學純粹度 AESTHETIC PURITY
100%
下拉選擇與警告框
!
警告:過於耀眼的配色可能會引起周圍同事高度關注與羨慕。
03 / THE SOUND CHIP 聲效微型鋼琴
物理聲波調變
利用瀏覽器內建 Web Audio API 生成的復古 8-Bit 晶片聲音。彈奏吧!
WAVEFORM:
04 / INTERACTIVE TASK LIST 動態互動看板
發送至看板
實時工作看版 (可點擊刪除)
✦ 完成新粗野網頁設計
完成包含極致高對比、4px實線邊框的切圖。
✦ 調整物理彈跳係數
修正 active 時陰影完全歸零壓平的手感。