[{"data":1,"prerenderedAt":640},["ShallowReactive",2],{"blog-post-/blog/zh-cn/how-to-create-css-box-shadows-online":3,"related-posts-/zh-CN/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-CN/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-cn/how-to-create-css-box-shadows-online",4,{"title":5,"description":84},"blog/zh-CN/how-to-create-css-box-shadows-online",[95,96,97],"CSS box shadow","UI design","CSS",[40,45],"f0y9oLIUmB0YOms8x2DTmsGOdd4IN43EBeZNnL4ON2E",[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",1790515165974]