[{"data":1,"prerenderedAt":638},["ShallowReactive",2],{"blog-post-/blog/ja-jp/how-to-create-css-box-shadows-online":3,"related-posts-/ja-JP/blog/how-to-create-css-box-shadows-online":99},{"id":4,"title":5,"author":6,"body":7,"category":81,"date":82,"description":83,"extension":84,"featured":85,"image":86,"meta":87,"navigation":88,"path":89,"readingTime":90,"seo":91,"stem":92,"tags":93,"tools":97,"__hash__":98},"content/blog/ja-JP/how-to-create-css-box-shadows-online.md","オンラインで CSS ボックスシャドウを作る：実践的な UI ワークフロー","Anything Tools Editorial",{"type":8,"value":9,"toc":71},"minimark",[10,14,18,22,30,34,47,50,53,56,59,62,65,68],[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,41,42,46],{},[37,38,40],"a",{"href":39},"/design/box-shadow-generator","CSS Box Shadow Generator"," で水平・垂直オフセット、ぼかし、広がり、不透明度をプレビューしながら調整します。隣の要素と合うことを確認してから CSS をコピーしてください。ブランドの面になじませたい場合は、",[37,43,45],{"href":44},"/design/color-picker","Color Picker"," で色を採取・調整します。真っ黒より少し色味のある影の方が落ち着くことがあります。",[19,48,49],{"id":49},"ルールを少数にする",[15,51,52],{},"要素ごとに新しい値を作らず、静止カード、浮動メニュー、キーボード操作用という少数の高さを決めます。影だけをフォーカス表示にしてはいけません。アウトラインなど、より明確な状態も必要です。",[19,54,55],{"id":55},"実環境で検証する",[15,57,58],{},"明暗両方の背景、モバイル幅、文字量の多いカードで確認します。白いモックアップで美しい影も、色付きの区画では消えるかもしれません。クリックできない要素をボタンのように見せないことも大切です。確定値は CSS 変数やデザイントークンに保存しましょう。",[19,60,61],{"id":61},"まとめ",[15,63,64],{},"良い影は構造を支え、主張しすぎません。文脈の中で調整し、意図して色を選び、少数の階層を再利用してください。",[19,66,67],{"id":67},"公開前の小さな確認",[15,69,70],{},"CSS や原稿をコピーする前に元のコピーを残し、対象ページであらためて表示を確認してください。実際の背景、フォント、画面幅でも見え方が適切かを確かめられ、問題があればすぐ戻せます。",{"title":72,"searchDepth":73,"depth":73,"links":74},"",2,[75,76,77,78,79,80],{"id":21,"depth":73,"text":21},{"id":32,"depth":73,"text":33},{"id":49,"depth":73,"text":49},{"id":55,"depth":73,"text":55},{"id":61,"depth":73,"text":61},{"id":67,"depth":73,"text":67},"Design","2026-09-20T00:00:00.000Z","オフセット、ぼかし、広がり、透明度をオンラインで調整し、カードやボタンに保守しやすい CSS を使う方法。","md",false,"/blog/how-to-create-css-box-shadows-online.png",{},true,"/blog/ja-jp/how-to-create-css-box-shadows-online",4,{"title":5,"description":83},"blog/ja-JP/how-to-create-css-box-shadows-online",[94,95,96],"CSS box shadow","UI design","CSS",[39,44],"VsjFWNvfSEbpmEW6xtkUzCvEGtzpz1RcauDtfufq01A",[100,555],{"id":101,"title":102,"author":103,"body":104,"category":81,"date":539,"description":540,"extension":84,"featured":85,"image":541,"meta":542,"navigation":88,"path":543,"readingTime":544,"seo":545,"stem":546,"tags":547,"tools":553,"__hash__":554},"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":105,"toc":522},[106,109,112,115,119,160,164,169,178,185,190,214,222,226,232,238,242,247,250,254,259,262,266,449,453,457,464,468,488,492,497,501,508],[11,107,102],{"id":108},"die-besten-kostenlosen-online-farbwähler-tools-in-2026",[15,110,111],{},"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,113,114],{},"In diesem Guide vergleichen wir die besten kostenlosen Online-Farbwähler in 2026.",[19,116,118],{"id":117},"kriterien-für-einen-hervorragenden-farbwähler","Kriterien für einen Hervorragenden Farbwähler",[120,121,122,130,136,142,148,154],"ol",{},[123,124,125,129],"li",{},[126,127,128],"strong",{},"Unterstützung mehrerer Farbformate:"," HEX, RGB, HSL, CMYK und mehr.",[123,131,132,135],{},[126,133,134],{},"Visuelle Präzision:"," Ein gut gestalteter Farb-Gradient und Farbton-Schieberegler.",[123,137,138,141],{},[126,139,140],{},"Palettengenerierung:"," Automatische Generierung von Komplementär-, Analogie-, Triadischen Farbschemata.",[123,143,144,147],{},[126,145,146],{},"WCAG-Barrierefreiheitsprüfung:"," Überprüfung der Kontrastverhältnisse.",[123,149,150,153],{},[126,151,152],{},"Kein Konto oder Installation nötig:"," Funktioniert sofort im Browser.",[123,155,156,159],{},[126,157,158],{},"Datenschutz:"," Keine Daten werden an einen Server gesendet.",[19,161,163],{"id":162},"unsere-top-empfehlungen-für-2026","Unsere Top-Empfehlungen für 2026",[165,166,168],"h3",{"id":167},"_1-anything-tools-color-picker","1. Anything Tools Color Picker",[15,170,171,174,175],{},[126,172,173],{},"Webseite:"," ",[37,176,177],{"href":44},"anything.tools/design/color-picker",[15,179,180,181,184],{},"Unser Farbwähler wurde mit einer Philosophie entwickelt: ",[126,182,183],{},"Alle wesentlichen Funktionen bereitstellen, ohne dass Daten Ihren Browser verlassen."," Jede Farbberechnung, Palettengenerierung und Barrierefreiheitsprüfung läuft zu 100 % clientseitig.",[15,186,187],{},[126,188,189],{},"Hauptfunktionen:",[191,192,193,196,199,202,205,208,211],"ul",{},[123,194,195],{},"Echtzeit-Ausgabe in HEX, RGB, HSL und CMYK",[123,197,198],{},"Visueller Farbwähler mit Gradientenfläche und Farbton-Schieberegler",[123,200,201],{},"Ein-Klick-Kopie für alle Formate",[123,203,204],{},"Integrierter WCAG-Kontrastprüfer",[123,206,207],{},"Komplementär-, Analogie-, Triadische und Split-Komplementär-Paletten",[123,209,210],{},"Keine Werbung, keine Registrierung, kein Tracking",[123,212,213],{},"Funktioniert nach dem Laden komplett offline",[15,215,216,217,221],{},"Für erweiterte Formatkonvertierungen nutzen Sie auch unseren dedizierten ",[37,218,220],{"href":219},"/design/color-converter","Farbkonverter",".",[165,223,225],{"id":224},"_2-google-color-picker","2. Google Color Picker",[15,227,228,231],{},[126,229,230],{},"Zugang:"," Suchen Sie „color picker\" bei Google. Der integrierte Farbwähler erscheint direkt in den Suchergebnissen.",[15,233,234,237],{},[126,235,236],{},"Einschränkungen:"," Kein HSL/CMYK, keine Palettengenerierung, keine WCAG-Prüfung.",[165,239,241],{"id":240},"_3-coolors","3. Coolors",[15,243,244,246],{},[126,245,173],{}," coolors.co",[15,248,249],{},"Beliebtes Palettengenerierungs-Tool. Stärke liegt in der schnellen Erstellung von 5-Farben-Paletten.",[165,251,253],{"id":252},"_4-adobe-color","4. Adobe Color",[15,255,256,258],{},[126,257,173],{}," color.adobe.com",[15,260,261],{},"Das Branchenstandard-Paletten-Tool, integriert in das Adobe-Ökosystem.",[19,263,265],{"id":264},"vergleichstabelle","Vergleichstabelle",[267,268,269,291],"table",{},[270,271,272],"thead",{},[273,274,275,279,282,285,288],"tr",{},[276,277,278],"th",{},"Funktion",[276,280,281],{},"Anything Tools",[276,283,284],{},"Google",[276,286,287],{},"Coolors",[276,289,290],{},"Adobe Color",[292,293,294,311,327,342,357,372,388,403,419,434],"tbody",{},[273,295,296,302,305,307,309],{},[297,298,299],"td",{},[126,300,301],{},"HEX/RGB",[297,303,304],{},"✅",[297,306,304],{},[297,308,304],{},[297,310,304],{},[273,312,313,318,320,323,325],{},[297,314,315],{},[126,316,317],{},"HSL",[297,319,304],{},[297,321,322],{},"❌",[297,324,304],{},[297,326,304],{},[273,328,329,334,336,338,340],{},[297,330,331],{},[126,332,333],{},"CMYK",[297,335,304],{},[297,337,322],{},[297,339,322],{},[297,341,304],{},[273,343,344,349,351,353,355],{},[297,345,346],{},[126,347,348],{},"Visueller Wähler",[297,350,304],{},[297,352,304],{},[297,354,304],{},[297,356,304],{},[273,358,359,364,366,368,370],{},[297,360,361],{},[126,362,363],{},"Palettengenerierung",[297,365,304],{},[297,367,322],{},[297,369,304],{},[297,371,304],{},[273,373,374,379,381,383,386],{},[297,375,376],{},[126,377,378],{},"WCAG-Kontrast",[297,380,304],{},[297,382,322],{},[297,384,385],{},"Eingeschränkt",[297,387,304],{},[273,389,390,395,397,399,401],{},[297,391,392],{},[126,393,394],{},"Offline-Support",[297,396,304],{},[297,398,322],{},[297,400,322],{},[297,402,322],{},[273,404,405,410,412,414,417],{},[297,406,407],{},[126,408,409],{},"Kein Konto nötig",[297,411,304],{},[297,413,304],{},[297,415,416],{},"Teilweise",[297,418,322],{},[273,420,421,426,428,430,432],{},[297,422,423],{},[126,424,425],{},"Datenschutz (clientseitig)",[297,427,304],{},[297,429,322],{},[297,431,322],{},[297,433,322],{},[273,435,436,441,443,445,447],{},[297,437,438],{},[126,439,440],{},"Kostenlos",[297,442,304],{},[297,444,304],{},[297,446,416],{},[297,448,416],{},[19,450,452],{"id":451},"professionelle-tipps-zur-farbwahl","Professionelle Tipps zur Farbwahl",[165,454,456],{"id":455},"_1-starten-sie-mit-barrierefreiheit","1. Starten Sie mit Barrierefreiheit",[15,458,459,460,463],{},"Prüfen Sie immer zuerst das Kontrastverhältnis. WCAG 2.1 erfordert mindestens 4,5:1 für normalen Text. Unser ",[37,461,462],{"href":44},"Farbwähler"," zeigt Kontrastwerte in Echtzeit an.",[165,465,467],{"id":466},"_2-die-60-30-10-regel","2. Die 60-30-10-Regel",[191,469,470,476,482],{},[123,471,472,475],{},[126,473,474],{},"60 %"," für die dominante/Hintergrundfarbe",[123,477,478,481],{},[126,479,480],{},"30 %"," für die Sekundärfarbe",[123,483,484,487],{},[126,485,486],{},"10 %"," für die Akzentfarbe",[165,489,491],{"id":490},"_3-präzise-formatkonvertierung","3. Präzise Formatkonvertierung",[15,493,494,495,221],{},"Für pixelgenaue Farbkonsistenz zwischen CSS, Druck und Designdateien nutzen Sie unseren ",[37,496,220],{"href":219},[19,498,500],{"id":499},"fazit","Fazit",[15,502,503,504,507],{},"2026 gibt es ausgezeichnete kostenlose Farbwähler für jeden Workflow. Unser ",[37,505,506],{"href":44},"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,509,510,511,516,517],{},"👉 ",[126,512,513],{},[37,514,515],{"href":44},"Testen Sie unseren kostenlosen Farbwähler"," | ",[126,518,519],{},[37,520,521],{"href":219},"Konvertieren Sie Farben zwischen Formaten",{"title":72,"searchDepth":73,"depth":73,"links":523},[524,525,532,533,538],{"id":117,"depth":73,"text":118},{"id":162,"depth":73,"text":163,"children":526},[527,529,530,531],{"id":167,"depth":528,"text":168},3,{"id":224,"depth":528,"text":225},{"id":240,"depth":528,"text":241},{"id":252,"depth":528,"text":253},{"id":264,"depth":73,"text":265},{"id":451,"depth":73,"text":452,"children":534},[535,536,537],{"id":455,"depth":528,"text":456},{"id":466,"depth":528,"text":467},{"id":490,"depth":528,"text":491},{"id":499,"depth":73,"text":500},"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":102,"description":540},"blog/de-DE/best-free-color-picker-tools-online",[462,548,549,550,551,317,552],"Design-Tools","Webdesign","HEX","RGB","Barrierefreiheit",[44,219],"kKBFT0KreAesSzAq2z9iZO2ReshD9QoDaJc2AC9Jf2s",{"id":556,"title":557,"author":6,"body":558,"category":81,"date":626,"description":627,"extension":84,"featured":85,"image":628,"meta":629,"navigation":88,"path":630,"readingTime":90,"seo":631,"stem":632,"tags":633,"tools":636,"__hash__":637},"content/blog/de-DE/create-css-gradients-online.md","CSS-Verläufe online erstellen: Ein praktischer Design-Workflow",{"type":8,"value":559,"toc":619},[560,563,566,570,573,577,592,596,599,603,614,616],[11,561,557],{"id":562},"css-verläufe-online-erstellen-ein-praktischer-design-workflow",[15,564,565],{},"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,567,569],{"id":568},"den-verlaufstyp-wählen","Den Verlaufstyp wählen",[15,571,572],{},"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,574,576],{"id":575},"im-browser-erstellen","Im Browser erstellen",[15,578,579,580,584,585,587,588,591],{},"Öffne den ",[37,581,583],{"href":582},"/design/gradient-generator","Verlaufsgenerator",", wähle die Richtung und passe die Stopps in der Vorschau an. Mit dem ",[37,586,45],{"href":44}," kannst du eine Markenfarbe aufnehmen; der ",[37,589,590],{"href":219},"Color Converter"," liefert einen CSS-tauglichen Farbwert.",[19,593,595],{"id":594},"text-lesbar-halten","Text lesbar halten",[15,597,598],{},"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,600,602],{"id":601},"wiederverwendbar-machen","Wiederverwendbar machen",[15,604,605,606,609,610,613],{},"Übernimm das CSS und verwende einen semantischen Namen wie ",[26,607,608],{},"--surface-accent"," statt ",[26,611,612],{},"--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,615,500],{"id":499},[15,617,618],{},"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":72,"searchDepth":73,"depth":73,"links":620},[621,622,623,624,625],{"id":568,"depth":73,"text":569},{"id":575,"depth":73,"text":576},{"id":594,"depth":73,"text":595},{"id":601,"depth":73,"text":602},{"id":499,"depth":73,"text":500},"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":557,"description":627},"blog/de-DE/create-css-gradients-online",[634,583,549,635],"CSS-Verläufe","Farbe",[582,44,219],"HahPRSn7Z__A9lolRGY0KacuFfajVSxsnRNeKnikqyc",1790515295129]