[{"data":1,"prerenderedAt":643},["ShallowReactive",2],{"blog-post-/blog/ko-kr/how-to-create-css-box-shadows-online":3,"related-posts-/ko-KR/blog/how-to-create-css-box-shadows-online":103},{"id":4,"title":5,"author":6,"body":7,"category":85,"date":86,"description":87,"extension":88,"featured":89,"image":90,"meta":91,"navigation":92,"path":93,"readingTime":94,"seo":95,"stem":96,"tags":97,"tools":101,"__hash__":102},"content/blog/ko-KR/how-to-create-css-box-shadows-online.md","온라인에서 CSS 박스 섀도 만들기: 실용적인 UI 워크플로","Anything Tools Editorial",{"type":8,"value":9,"toc":75},"minimark",[10,14,18,23,31,35,48,52,55,59,62,65,68,72],[11,12,5],"h1",{"id":13},"온라인에서-css-박스-섀도-만들기-실용적인-ui-워크플로",[15,16,17],"p",{},"그림자는 단순한 장식이 아니라 간격과 위계를 정하는 요소입니다. 부드럽고 절제된 그림자는 카드를 배경에서 분리하지만, 지나치게 진하거나 큰 그림자는 화면을 무겁게 만듭니다. 스타일시트의 숫자를 반복해서 고치는 대신 눈으로 보며 조절하면 더 빠릅니다.",[19,20,22],"h2",{"id":21},"실제-배경에서-시작하기","실제 배경에서 시작하기",[15,24,25,26,30],{},"컴포넌트를 실제로 놓일 배경 위에 둡니다. 작은 세로 오프셋, 넉넉한 블러, 낮은 불투명도에서 시작하고 한 번에 한 값만 바꿉니다. 깊이가 거리, 부드러움, 대비 중 무엇에서 오는지 알 수 있습니다. 떠 있는 카드에는 양의 y 오프셋이 자연스럽고, 눌린 입력칸에는 낮은 대비의 ",[27,28,29],"code",{},"inset","이 맞습니다.",[19,32,34],{"id":33},"생성기로-조절하고-색도-확인하기","생성기로 조절하고 색도 확인하기",[15,36,37,42,43,47],{},[38,39,41],"a",{"href":40},"/design/box-shadow-generator","CSS 박스 섀도 생성기","에서 가로·세로 오프셋, 블러, 확산, 알파를 미리 보며 조절합니다. 주변 컴포넌트와 함께 확인한 뒤 CSS를 복사하세요. 브랜드 표면에 맞추려면 ",[38,44,46],{"href":45},"/design/color-picker","색상 선택기","로 색을 추출하거나 다듬습니다. 순수 검정보다 약간 색조가 있는 그림자가 더 차분할 수 있습니다.",[19,49,51],{"id":50},"일관된-체계-유지하기","일관된 체계 유지하기",[15,53,54],{},"요소마다 새 값을 만들지 말고, 정지 카드·떠 있는 메뉴·키보드 포커스처럼 적은 단계로 정합니다. 그림자만으로 포커스를 표시하면 안 됩니다. 윤곽선처럼 명확한 상태도 접근성에 필요합니다.",[19,56,58],{"id":57},"실제-조건에서-확인하기","실제 조건에서 확인하기",[15,60,61],{},"밝고 어두운 배경, 모바일 폭, 글이 많은 카드에서 결과를 확인합니다. 흰 목업에서 예쁜 그림자도 색 있는 구역에서는 사라질 수 있습니다. 클릭할 수 없는 요소가 버튼처럼 보이게 해서도 안 됩니다. 최종 값은 CSS 변수나 디자인 토큰으로 저장하세요.",[19,63,64],{"id":64},"마무리",[15,66,67],{},"좋은 박스 섀도는 눈에 띄지 않으면서 구조를 돕습니다. 문맥 안에서 조절하고, 의도적으로 색을 고르며, 간결한 높이 체계를 재사용하세요.",[19,69,71],{"id":70},"발행-전-간단한-확인","발행 전 간단한 확인",[15,73,74],{},"CSS나 원고를 복사하기 전에 원본 사본을 남기고 대상 페이지에서 다시 확인하세요. 실제 배경, 글꼴, 화면 폭에서도 시각과 텍스트가 적절한지 확인할 수 있고 문제가 생겼을 때 빠르게 되돌릴 수 있습니다.",{"title":76,"searchDepth":77,"depth":77,"links":78},"",2,[79,80,81,82,83,84],{"id":21,"depth":77,"text":22},{"id":33,"depth":77,"text":34},{"id":50,"depth":77,"text":51},{"id":57,"depth":77,"text":58},{"id":64,"depth":77,"text":64},{"id":70,"depth":77,"text":71},"Design","2026-09-20T00:00:00.000Z","오프셋, 블러, 확산, 불투명도를 조절해 카드·버튼·패널에 쓸 관리하기 좋은 CSS를 만듭니다.","md",false,"/blog/how-to-create-css-box-shadows-online.png",{},true,"/blog/ko-kr/how-to-create-css-box-shadows-online",4,{"title":5,"description":87},"blog/ko-KR/how-to-create-css-box-shadows-online",[98,99,100],"CSS box shadow","UI design","CSS",[40,45],"BlRjKkaH0-vP7wDcwxwXypqgxP1ZjNe6XchWpEz31IQ",[104,559],{"id":105,"title":106,"author":107,"body":108,"category":85,"date":543,"description":544,"extension":88,"featured":89,"image":545,"meta":546,"navigation":92,"path":547,"readingTime":548,"seo":549,"stem":550,"tags":551,"tools":557,"__hash__":558},"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":109,"toc":526},[110,113,116,119,123,164,168,173,182,189,194,218,226,230,236,242,246,251,254,258,263,266,270,453,457,461,468,472,492,496,501,505,512],[11,111,106],{"id":112},"die-besten-kostenlosen-online-farbwähler-tools-in-2026",[15,114,115],{},"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,117,118],{},"In diesem Guide vergleichen wir die besten kostenlosen Online-Farbwähler in 2026.",[19,120,122],{"id":121},"kriterien-für-einen-hervorragenden-farbwähler","Kriterien für einen Hervorragenden Farbwähler",[124,125,126,134,140,146,152,158],"ol",{},[127,128,129,133],"li",{},[130,131,132],"strong",{},"Unterstützung mehrerer Farbformate:"," HEX, RGB, HSL, CMYK und mehr.",[127,135,136,139],{},[130,137,138],{},"Visuelle Präzision:"," Ein gut gestalteter Farb-Gradient und Farbton-Schieberegler.",[127,141,142,145],{},[130,143,144],{},"Palettengenerierung:"," Automatische Generierung von Komplementär-, Analogie-, Triadischen Farbschemata.",[127,147,148,151],{},[130,149,150],{},"WCAG-Barrierefreiheitsprüfung:"," Überprüfung der Kontrastverhältnisse.",[127,153,154,157],{},[130,155,156],{},"Kein Konto oder Installation nötig:"," Funktioniert sofort im Browser.",[127,159,160,163],{},[130,161,162],{},"Datenschutz:"," Keine Daten werden an einen Server gesendet.",[19,165,167],{"id":166},"unsere-top-empfehlungen-für-2026","Unsere Top-Empfehlungen für 2026",[169,170,172],"h3",{"id":171},"_1-anything-tools-color-picker","1. Anything Tools Color Picker",[15,174,175,178,179],{},[130,176,177],{},"Webseite:"," ",[38,180,181],{"href":45},"anything.tools/design/color-picker",[15,183,184,185,188],{},"Unser Farbwähler wurde mit einer Philosophie entwickelt: ",[130,186,187],{},"Alle wesentlichen Funktionen bereitstellen, ohne dass Daten Ihren Browser verlassen."," Jede Farbberechnung, Palettengenerierung und Barrierefreiheitsprüfung läuft zu 100 % clientseitig.",[15,190,191],{},[130,192,193],{},"Hauptfunktionen:",[195,196,197,200,203,206,209,212,215],"ul",{},[127,198,199],{},"Echtzeit-Ausgabe in HEX, RGB, HSL und CMYK",[127,201,202],{},"Visueller Farbwähler mit Gradientenfläche und Farbton-Schieberegler",[127,204,205],{},"Ein-Klick-Kopie für alle Formate",[127,207,208],{},"Integrierter WCAG-Kontrastprüfer",[127,210,211],{},"Komplementär-, Analogie-, Triadische und Split-Komplementär-Paletten",[127,213,214],{},"Keine Werbung, keine Registrierung, kein Tracking",[127,216,217],{},"Funktioniert nach dem Laden komplett offline",[15,219,220,221,225],{},"Für erweiterte Formatkonvertierungen nutzen Sie auch unseren dedizierten ",[38,222,224],{"href":223},"/design/color-converter","Farbkonverter",".",[169,227,229],{"id":228},"_2-google-color-picker","2. Google Color Picker",[15,231,232,235],{},[130,233,234],{},"Zugang:"," Suchen Sie „color picker\" bei Google. Der integrierte Farbwähler erscheint direkt in den Suchergebnissen.",[15,237,238,241],{},[130,239,240],{},"Einschränkungen:"," Kein HSL/CMYK, keine Palettengenerierung, keine WCAG-Prüfung.",[169,243,245],{"id":244},"_3-coolors","3. Coolors",[15,247,248,250],{},[130,249,177],{}," coolors.co",[15,252,253],{},"Beliebtes Palettengenerierungs-Tool. Stärke liegt in der schnellen Erstellung von 5-Farben-Paletten.",[169,255,257],{"id":256},"_4-adobe-color","4. Adobe Color",[15,259,260,262],{},[130,261,177],{}," color.adobe.com",[15,264,265],{},"Das Branchenstandard-Paletten-Tool, integriert in das Adobe-Ökosystem.",[19,267,269],{"id":268},"vergleichstabelle","Vergleichstabelle",[271,272,273,295],"table",{},[274,275,276],"thead",{},[277,278,279,283,286,289,292],"tr",{},[280,281,282],"th",{},"Funktion",[280,284,285],{},"Anything Tools",[280,287,288],{},"Google",[280,290,291],{},"Coolors",[280,293,294],{},"Adobe Color",[296,297,298,315,331,346,361,376,392,407,423,438],"tbody",{},[277,299,300,306,309,311,313],{},[301,302,303],"td",{},[130,304,305],{},"HEX/RGB",[301,307,308],{},"✅",[301,310,308],{},[301,312,308],{},[301,314,308],{},[277,316,317,322,324,327,329],{},[301,318,319],{},[130,320,321],{},"HSL",[301,323,308],{},[301,325,326],{},"❌",[301,328,308],{},[301,330,308],{},[277,332,333,338,340,342,344],{},[301,334,335],{},[130,336,337],{},"CMYK",[301,339,308],{},[301,341,326],{},[301,343,326],{},[301,345,308],{},[277,347,348,353,355,357,359],{},[301,349,350],{},[130,351,352],{},"Visueller Wähler",[301,354,308],{},[301,356,308],{},[301,358,308],{},[301,360,308],{},[277,362,363,368,370,372,374],{},[301,364,365],{},[130,366,367],{},"Palettengenerierung",[301,369,308],{},[301,371,326],{},[301,373,308],{},[301,375,308],{},[277,377,378,383,385,387,390],{},[301,379,380],{},[130,381,382],{},"WCAG-Kontrast",[301,384,308],{},[301,386,326],{},[301,388,389],{},"Eingeschränkt",[301,391,308],{},[277,393,394,399,401,403,405],{},[301,395,396],{},[130,397,398],{},"Offline-Support",[301,400,308],{},[301,402,326],{},[301,404,326],{},[301,406,326],{},[277,408,409,414,416,418,421],{},[301,410,411],{},[130,412,413],{},"Kein Konto nötig",[301,415,308],{},[301,417,308],{},[301,419,420],{},"Teilweise",[301,422,326],{},[277,424,425,430,432,434,436],{},[301,426,427],{},[130,428,429],{},"Datenschutz (clientseitig)",[301,431,308],{},[301,433,326],{},[301,435,326],{},[301,437,326],{},[277,439,440,445,447,449,451],{},[301,441,442],{},[130,443,444],{},"Kostenlos",[301,446,308],{},[301,448,308],{},[301,450,420],{},[301,452,420],{},[19,454,456],{"id":455},"professionelle-tipps-zur-farbwahl","Professionelle Tipps zur Farbwahl",[169,458,460],{"id":459},"_1-starten-sie-mit-barrierefreiheit","1. Starten Sie mit Barrierefreiheit",[15,462,463,464,467],{},"Prüfen Sie immer zuerst das Kontrastverhältnis. WCAG 2.1 erfordert mindestens 4,5:1 für normalen Text. Unser ",[38,465,466],{"href":45},"Farbwähler"," zeigt Kontrastwerte in Echtzeit an.",[169,469,471],{"id":470},"_2-die-60-30-10-regel","2. Die 60-30-10-Regel",[195,473,474,480,486],{},[127,475,476,479],{},[130,477,478],{},"60 %"," für die dominante/Hintergrundfarbe",[127,481,482,485],{},[130,483,484],{},"30 %"," für die Sekundärfarbe",[127,487,488,491],{},[130,489,490],{},"10 %"," für die Akzentfarbe",[169,493,495],{"id":494},"_3-präzise-formatkonvertierung","3. Präzise Formatkonvertierung",[15,497,498,499,225],{},"Für pixelgenaue Farbkonsistenz zwischen CSS, Druck und Designdateien nutzen Sie unseren ",[38,500,224],{"href":223},[19,502,504],{"id":503},"fazit","Fazit",[15,506,507,508,511],{},"2026 gibt es ausgezeichnete kostenlose Farbwähler für jeden Workflow. Unser ",[38,509,510],{"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,513,514,515,520,521],{},"👉 ",[130,516,517],{},[38,518,519],{"href":45},"Testen Sie unseren kostenlosen Farbwähler"," | ",[130,522,523],{},[38,524,525],{"href":223},"Konvertieren Sie Farben zwischen Formaten",{"title":76,"searchDepth":77,"depth":77,"links":527},[528,529,536,537,542],{"id":121,"depth":77,"text":122},{"id":166,"depth":77,"text":167,"children":530},[531,533,534,535],{"id":171,"depth":532,"text":172},3,{"id":228,"depth":532,"text":229},{"id":244,"depth":532,"text":245},{"id":256,"depth":532,"text":257},{"id":268,"depth":77,"text":269},{"id":455,"depth":77,"text":456,"children":538},[539,540,541],{"id":459,"depth":532,"text":460},{"id":470,"depth":532,"text":471},{"id":494,"depth":532,"text":495},{"id":503,"depth":77,"text":504},"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":106,"description":544},"blog/de-DE/best-free-color-picker-tools-online",[466,552,553,554,555,321,556],"Design-Tools","Webdesign","HEX","RGB","Barrierefreiheit",[45,223],"kKBFT0KreAesSzAq2z9iZO2ReshD9QoDaJc2AC9Jf2s",{"id":560,"title":561,"author":6,"body":562,"category":85,"date":631,"description":632,"extension":88,"featured":89,"image":633,"meta":634,"navigation":92,"path":635,"readingTime":94,"seo":636,"stem":637,"tags":638,"tools":641,"__hash__":642},"content/blog/de-DE/create-css-gradients-online.md","CSS-Verläufe online erstellen: Ein praktischer Design-Workflow",{"type":8,"value":563,"toc":624},[564,567,570,574,577,581,597,601,604,608,619,621],[11,565,561],{"id":566},"css-verläufe-online-erstellen-ein-praktischer-design-workflow",[15,568,569],{},"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,571,573],{"id":572},"den-verlaufstyp-wählen","Den Verlaufstyp wählen",[15,575,576],{},"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,578,580],{"id":579},"im-browser-erstellen","Im Browser erstellen",[15,582,583,584,588,589,592,593,596],{},"Öffne den ",[38,585,587],{"href":586},"/design/gradient-generator","Verlaufsgenerator",", wähle die Richtung und passe die Stopps in der Vorschau an. Mit dem ",[38,590,591],{"href":45},"Color Picker"," kannst du eine Markenfarbe aufnehmen; der ",[38,594,595],{"href":223},"Color Converter"," liefert einen CSS-tauglichen Farbwert.",[19,598,600],{"id":599},"text-lesbar-halten","Text lesbar halten",[15,602,603],{},"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,605,607],{"id":606},"wiederverwendbar-machen","Wiederverwendbar machen",[15,609,610,611,614,615,618],{},"Übernimm das CSS und verwende einen semantischen Namen wie ",[27,612,613],{},"--surface-accent"," statt ",[27,616,617],{},"--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,620,504],{"id":503},[15,622,623],{},"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":76,"searchDepth":77,"depth":77,"links":625},[626,627,628,629,630],{"id":572,"depth":77,"text":573},{"id":579,"depth":77,"text":580},{"id":599,"depth":77,"text":600},{"id":606,"depth":77,"text":607},{"id":503,"depth":77,"text":504},"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":561,"description":632},"blog/de-DE/create-css-gradients-online",[639,587,553,640],"CSS-Verläufe","Farbe",[586,45,223],"HahPRSn7Z__A9lolRGY0KacuFfajVSxsnRNeKnikqyc",1790515557717]