[{"data":1,"prerenderedAt":640},["ShallowReactive",2],{"blog-post-/blog/zh-tw/how-to-create-css-box-shadows-online":3,"related-posts-/zh-TW/blog/how-to-create-css-box-shadows-online":100},{"id":4,"title":5,"author":6,"body":7,"category":82,"date":83,"description":84,"extension":85,"featured":86,"image":87,"meta":88,"navigation":89,"path":90,"readingTime":91,"seo":92,"stem":93,"tags":94,"tools":98,"__hash__":99},"content/blog/zh-TW/how-to-create-css-box-shadows-online.md","線上建立 CSS 方塊陰影：實用 UI 工作流程","Anything Tools Editorial",{"type":8,"value":9,"toc":72},"minimark",[10,14,18,22,30,34,48,51,54,57,60,63,66,69],[11,12,5],"h1",{"id":13},"線上建立-css-方塊陰影實用-ui-工作流程",[15,16,17],"p",{},"陰影不只是裝飾，它會決定間距感與層級感。輕柔、克制的陰影能讓卡片從背景中分離；過深或過大的陰影會讓相同介面顯得沉重。以視覺化方式調整，比在樣式表中反覆修改數字更有效率。",[19,20,21],"h2",{"id":21},"先看真實的承載表面",[15,23,24,25,29],{},"把元件放在實際會出現的背景上。先使用較小的垂直位移、較大的模糊與較低的不透明度，再一次只調一個參數，判斷深度來自距離、柔和度還是對比度。浮起的卡片通常適合正向 y 位移；內嵌欄位可使用 ",[26,27,28],"code",{},"inset"," 並維持低對比。",[19,31,33],{"id":32},"用產生器調整再核對顏色","用產生器調整，再核對顏色",[15,35,36,37,42,43,47],{},"開啟 ",[38,39,41],"a",{"href":40},"/design/box-shadow-generator","CSS 方塊陰影產生器","，邊看預覽邊調整水平與垂直位移、模糊、擴散和透明度。確認它和相鄰元件協調後再複製程式碼。若陰影要呼應品牌色，可先用",[38,44,46],{"href":45},"/design/color-picker","顏色選擇器","取樣或微調；略帶色相的陰影通常比純黑更沉穩。",[19,49,50],{"id":50},"建立一致的層級",[15,52,53],{},"不要替每個元素臨時發明數值，而是定義少量高度等級：靜止卡片用輕陰影、浮動選單用較明確的陰影、鍵盤焦點另設狀態。陰影不應是唯一焦點提示；外框或其他清晰狀態對無障礙更可靠。",[19,55,56],{"id":56},"在真實條件下檢查",[15,58,59],{},"在淺色與深色表面、手機尺寸及文字密集卡片中檢查結果。白色稿上優雅的陰影，放到彩色區塊可能消失；也不要讓陰影暗示不可點擊內容像按鈕。將定稿存為 CSS 變數或設計 token，讓後續頁面沿用相同視覺語言。",[19,61,62],{"id":62},"結語",[15,64,65],{},"好的方塊陰影服務於結構而不搶眼。請在情境中調整、刻意選色，並重用精簡的層級系統。",[19,67,68],{"id":68},"發布前的小檢查",[15,70,71],{},"複製 CSS 或發布文案前，請保留原始副本，並在目標頁面再次查看。如此可確認視覺與文字在真正的背景、字型和螢幕寬度下仍然合適，也便於出現問題時快速回復。",{"title":73,"searchDepth":74,"depth":74,"links":75},"",2,[76,77,78,79,80,81],{"id":21,"depth":74,"text":21},{"id":32,"depth":74,"text":33},{"id":50,"depth":74,"text":50},{"id":56,"depth":74,"text":56},{"id":62,"depth":74,"text":62},{"id":68,"depth":74,"text":68},"Design","2026-09-20T00:00:00.000Z","線上調整 CSS 方塊陰影的位移、模糊、擴散和透明度，為卡片、按鈕與面板複製易維護的程式碼。","md",false,"/blog/how-to-create-css-box-shadows-online.png",{},true,"/blog/zh-tw/how-to-create-css-box-shadows-online",4,{"title":5,"description":84},"blog/zh-TW/how-to-create-css-box-shadows-online",[95,96,97],"CSS box shadow","UI design","CSS",[40,45],"reA6dPze-9x5skktnbTKbYJvfZa3ENTRml31Ms4JFzE",[101,556],{"id":102,"title":103,"author":104,"body":105,"category":82,"date":540,"description":541,"extension":85,"featured":86,"image":542,"meta":543,"navigation":89,"path":544,"readingTime":545,"seo":546,"stem":547,"tags":548,"tools":554,"__hash__":555},"content/blog/de-DE/best-free-color-picker-tools-online.md","Die Besten Kostenlosen Online-Farbwähler-Tools in 2026","Anything Tools Team",{"type":8,"value":106,"toc":523},[107,110,113,116,120,161,165,170,179,186,191,215,223,227,233,239,243,248,251,255,260,263,267,450,454,458,465,469,489,493,498,502,509],[11,108,103],{"id":109},"die-besten-kostenlosen-online-farbwähler-tools-in-2026",[15,111,112],{},"Farbe ist eines der mächtigsten Elemente im Design. Der richtige Blauton vermittelt Vertrauen, das falsche Grün kann einen „Jetzt kaufen\"-Button unsichtbar machen, und eine schlecht gewählte Hintergrundfarbe kann Ihren Text komplett unleserlich machen. Ob Sie ein UI-Designer sind, der eine Markenpalette verfeinert, ein Frontend-Entwickler, der HEX-Codes für CSS braucht, oder ein Content-Creator, der Akzentfarben wählt — Sie brauchen ein zuverlässiges Farbwähler-Tool.",[15,114,115],{},"In diesem Guide vergleichen wir die besten kostenlosen Online-Farbwähler in 2026.",[19,117,119],{"id":118},"kriterien-für-einen-hervorragenden-farbwähler","Kriterien für einen Hervorragenden Farbwähler",[121,122,123,131,137,143,149,155],"ol",{},[124,125,126,130],"li",{},[127,128,129],"strong",{},"Unterstützung mehrerer Farbformate:"," HEX, RGB, HSL, CMYK und mehr.",[124,132,133,136],{},[127,134,135],{},"Visuelle Präzision:"," Ein gut gestalteter Farb-Gradient und Farbton-Schieberegler.",[124,138,139,142],{},[127,140,141],{},"Palettengenerierung:"," Automatische Generierung von Komplementär-, Analogie-, Triadischen Farbschemata.",[124,144,145,148],{},[127,146,147],{},"WCAG-Barrierefreiheitsprüfung:"," Überprüfung der Kontrastverhältnisse.",[124,150,151,154],{},[127,152,153],{},"Kein Konto oder Installation nötig:"," Funktioniert sofort im Browser.",[124,156,157,160],{},[127,158,159],{},"Datenschutz:"," Keine Daten werden an einen Server gesendet.",[19,162,164],{"id":163},"unsere-top-empfehlungen-für-2026","Unsere Top-Empfehlungen für 2026",[166,167,169],"h3",{"id":168},"_1-anything-tools-color-picker","1. Anything Tools Color Picker",[15,171,172,175,176],{},[127,173,174],{},"Webseite:"," ",[38,177,178],{"href":45},"anything.tools/design/color-picker",[15,180,181,182,185],{},"Unser Farbwähler wurde mit einer Philosophie entwickelt: ",[127,183,184],{},"Alle wesentlichen Funktionen bereitstellen, ohne dass Daten Ihren Browser verlassen."," Jede Farbberechnung, Palettengenerierung und Barrierefreiheitsprüfung läuft zu 100 % clientseitig.",[15,187,188],{},[127,189,190],{},"Hauptfunktionen:",[192,193,194,197,200,203,206,209,212],"ul",{},[124,195,196],{},"Echtzeit-Ausgabe in HEX, RGB, HSL und CMYK",[124,198,199],{},"Visueller Farbwähler mit Gradientenfläche und Farbton-Schieberegler",[124,201,202],{},"Ein-Klick-Kopie für alle Formate",[124,204,205],{},"Integrierter WCAG-Kontrastprüfer",[124,207,208],{},"Komplementär-, Analogie-, Triadische und Split-Komplementär-Paletten",[124,210,211],{},"Keine Werbung, keine Registrierung, kein Tracking",[124,213,214],{},"Funktioniert nach dem Laden komplett offline",[15,216,217,218,222],{},"Für erweiterte Formatkonvertierungen nutzen Sie auch unseren dedizierten ",[38,219,221],{"href":220},"/design/color-converter","Farbkonverter",".",[166,224,226],{"id":225},"_2-google-color-picker","2. Google Color Picker",[15,228,229,232],{},[127,230,231],{},"Zugang:"," Suchen Sie „color picker\" bei Google. Der integrierte Farbwähler erscheint direkt in den Suchergebnissen.",[15,234,235,238],{},[127,236,237],{},"Einschränkungen:"," Kein HSL/CMYK, keine Palettengenerierung, keine WCAG-Prüfung.",[166,240,242],{"id":241},"_3-coolors","3. Coolors",[15,244,245,247],{},[127,246,174],{}," coolors.co",[15,249,250],{},"Beliebtes Palettengenerierungs-Tool. Stärke liegt in der schnellen Erstellung von 5-Farben-Paletten.",[166,252,254],{"id":253},"_4-adobe-color","4. Adobe Color",[15,256,257,259],{},[127,258,174],{}," color.adobe.com",[15,261,262],{},"Das Branchenstandard-Paletten-Tool, integriert in das Adobe-Ökosystem.",[19,264,266],{"id":265},"vergleichstabelle","Vergleichstabelle",[268,269,270,292],"table",{},[271,272,273],"thead",{},[274,275,276,280,283,286,289],"tr",{},[277,278,279],"th",{},"Funktion",[277,281,282],{},"Anything Tools",[277,284,285],{},"Google",[277,287,288],{},"Coolors",[277,290,291],{},"Adobe Color",[293,294,295,312,328,343,358,373,389,404,420,435],"tbody",{},[274,296,297,303,306,308,310],{},[298,299,300],"td",{},[127,301,302],{},"HEX/RGB",[298,304,305],{},"✅",[298,307,305],{},[298,309,305],{},[298,311,305],{},[274,313,314,319,321,324,326],{},[298,315,316],{},[127,317,318],{},"HSL",[298,320,305],{},[298,322,323],{},"❌",[298,325,305],{},[298,327,305],{},[274,329,330,335,337,339,341],{},[298,331,332],{},[127,333,334],{},"CMYK",[298,336,305],{},[298,338,323],{},[298,340,323],{},[298,342,305],{},[274,344,345,350,352,354,356],{},[298,346,347],{},[127,348,349],{},"Visueller Wähler",[298,351,305],{},[298,353,305],{},[298,355,305],{},[298,357,305],{},[274,359,360,365,367,369,371],{},[298,361,362],{},[127,363,364],{},"Palettengenerierung",[298,366,305],{},[298,368,323],{},[298,370,305],{},[298,372,305],{},[274,374,375,380,382,384,387],{},[298,376,377],{},[127,378,379],{},"WCAG-Kontrast",[298,381,305],{},[298,383,323],{},[298,385,386],{},"Eingeschränkt",[298,388,305],{},[274,390,391,396,398,400,402],{},[298,392,393],{},[127,394,395],{},"Offline-Support",[298,397,305],{},[298,399,323],{},[298,401,323],{},[298,403,323],{},[274,405,406,411,413,415,418],{},[298,407,408],{},[127,409,410],{},"Kein Konto nötig",[298,412,305],{},[298,414,305],{},[298,416,417],{},"Teilweise",[298,419,323],{},[274,421,422,427,429,431,433],{},[298,423,424],{},[127,425,426],{},"Datenschutz (clientseitig)",[298,428,305],{},[298,430,323],{},[298,432,323],{},[298,434,323],{},[274,436,437,442,444,446,448],{},[298,438,439],{},[127,440,441],{},"Kostenlos",[298,443,305],{},[298,445,305],{},[298,447,417],{},[298,449,417],{},[19,451,453],{"id":452},"professionelle-tipps-zur-farbwahl","Professionelle Tipps zur Farbwahl",[166,455,457],{"id":456},"_1-starten-sie-mit-barrierefreiheit","1. Starten Sie mit Barrierefreiheit",[15,459,460,461,464],{},"Prüfen Sie immer zuerst das Kontrastverhältnis. WCAG 2.1 erfordert mindestens 4,5:1 für normalen Text. Unser ",[38,462,463],{"href":45},"Farbwähler"," zeigt Kontrastwerte in Echtzeit an.",[166,466,468],{"id":467},"_2-die-60-30-10-regel","2. Die 60-30-10-Regel",[192,470,471,477,483],{},[124,472,473,476],{},[127,474,475],{},"60 %"," für die dominante/Hintergrundfarbe",[124,478,479,482],{},[127,480,481],{},"30 %"," für die Sekundärfarbe",[124,484,485,488],{},[127,486,487],{},"10 %"," für die Akzentfarbe",[166,490,492],{"id":491},"_3-präzise-formatkonvertierung","3. Präzise Formatkonvertierung",[15,494,495,496,222],{},"Für pixelgenaue Farbkonsistenz zwischen CSS, Druck und Designdateien nutzen Sie unseren ",[38,497,221],{"href":220},[19,499,501],{"id":500},"fazit","Fazit",[15,503,504,505,508],{},"2026 gibt es ausgezeichnete kostenlose Farbwähler für jeden Workflow. Unser ",[38,506,507],{"href":45},"Anything Tools Color Picker"," bietet die beste Kombination aus Funktionen, Datenschutz und Geschwindigkeit — alles in Ihrem Browser, ohne Tracking, ohne Konto und ohne Einschränkungen.",[15,510,511,512,517,518],{},"👉 ",[127,513,514],{},[38,515,516],{"href":45},"Testen Sie unseren kostenlosen Farbwähler"," | ",[127,519,520],{},[38,521,522],{"href":220},"Konvertieren Sie Farben zwischen Formaten",{"title":73,"searchDepth":74,"depth":74,"links":524},[525,526,533,534,539],{"id":118,"depth":74,"text":119},{"id":163,"depth":74,"text":164,"children":527},[528,530,531,532],{"id":168,"depth":529,"text":169},3,{"id":225,"depth":529,"text":226},{"id":241,"depth":529,"text":242},{"id":253,"depth":529,"text":254},{"id":265,"depth":74,"text":266},{"id":452,"depth":74,"text":453,"children":535},[536,537,538],{"id":456,"depth":529,"text":457},{"id":467,"depth":529,"text":468},{"id":491,"depth":529,"text":492},{"id":500,"depth":74,"text":501},"2026-04-18T00:00:00.000Z","Entdecken Sie die besten kostenlosen Online-Farbwähler für Designer und Entwickler. Vergleichen Sie Funktionen, Formate und Barrierefreiheitsprüfungen.","/blog/best-free-color-picker-tools-online.png",{},"/blog/de-de/best-free-color-picker-tools-online",7,{"title":103,"description":541},"blog/de-DE/best-free-color-picker-tools-online",[463,549,550,551,552,318,553],"Design-Tools","Webdesign","HEX","RGB","Barrierefreiheit",[45,220],"kKBFT0KreAesSzAq2z9iZO2ReshD9QoDaJc2AC9Jf2s",{"id":557,"title":558,"author":6,"body":559,"category":82,"date":628,"description":629,"extension":85,"featured":86,"image":630,"meta":631,"navigation":89,"path":632,"readingTime":91,"seo":633,"stem":634,"tags":635,"tools":638,"__hash__":639},"content/blog/de-DE/create-css-gradients-online.md","CSS-Verläufe online erstellen: Ein praktischer Design-Workflow",{"type":8,"value":560,"toc":621},[561,564,567,571,574,578,594,598,601,605,616,618],[11,562,558],{"id":563},"css-verläufe-online-erstellen-ein-praktischer-design-workflow",[15,565,566],{},"Verläufe können einer Oberfläche Tiefe und Richtung geben, zufällige Farben erschweren jedoch oft das Lesen. Ein guter Verlauf hat zuerst eine Aufgabe: Bereiche trennen, Aufmerksamkeit lenken oder einen ruhigen Hintergrund schaffen.",[19,568,570],{"id":569},"den-verlaufstyp-wählen","Den Verlaufstyp wählen",[15,572,573],{},"Ein linearer Verlauf eignet sich für Banner, Karten und gerichtete Bewegung. Ein radialer Verlauf zieht den Blick zu einem Punkt und passt hinter eine Illustration. Starte mit zwei Farben und füge einen dritten Stopp nur hinzu, wenn er den Übergang verbessert.",[19,575,577],{"id":576},"im-browser-erstellen","Im Browser erstellen",[15,579,580,581,585,586,589,590,593],{},"Öffne den ",[38,582,584],{"href":583},"/design/gradient-generator","Verlaufsgenerator",", wähle die Richtung und passe die Stopps in der Vorschau an. Mit dem ",[38,587,588],{"href":45},"Color Picker"," kannst du eine Markenfarbe aufnehmen; der ",[38,591,592],{"href":220},"Color Converter"," liefert einen CSS-tauglichen Farbwert.",[19,595,597],{"id":596},"text-lesbar-halten","Text lesbar halten",[15,599,600],{},"Lege echte Überschriften und Buttons über die Vorschau. Bei schwachem Kontrast kannst du den Hintergrund hinter hellem Text abdunkeln, die Sättigung nahe dem Text reduzieren oder ein dezentes Overlay ergänzen. Ein Verlauf sollte nicht allein eine Aktion oder einen Status vermitteln.",[19,602,604],{"id":603},"wiederverwendbar-machen","Wiederverwendbar machen",[15,606,607,608,611,612,615],{},"Übernimm das CSS und verwende einen semantischen Namen wie ",[26,609,610],{},"--surface-accent"," statt ",[26,613,614],{},"--blue-gradient-2",". Teste auch auf schmalen Bildschirmen und neben Bildern: Ein ausgewogener Desktop-Hintergrund kann auf Mobilgeräten nach dem Zuschnitt stören.",[19,617,501],{"id":500},[15,619,620],{},"Die besten Verläufe unterstützen Inhalte. Nutze eine fokussierte Palette, prüfe Kontrast mit echtem Text und speichere das CSS als wiederverwendbares Designtoken.",{"title":73,"searchDepth":74,"depth":74,"links":622},[623,624,625,626,627],{"id":569,"depth":74,"text":570},{"id":576,"depth":74,"text":577},{"id":596,"depth":74,"text":597},{"id":603,"depth":74,"text":604},{"id":500,"depth":74,"text":501},"2026-07-10T00:00:00.000Z","Erstelle CSS-Verläufe online mit bewussten Farbstopps, gut lesbarem Kontrast und wiederverwendbarem CSS.","/blog/create-css-gradients-online.png",{},"/blog/de-de/create-css-gradients-online",{"title":558,"description":629},"blog/de-DE/create-css-gradients-online",[636,584,550,637],"CSS-Verläufe","Farbe",[583,45,220],"HahPRSn7Z__A9lolRGY0KacuFfajVSxsnRNeKnikqyc",1790515231676]