[{"data":1,"prerenderedAt":144},["ShallowReactive",2],{"tool-content-en-css-filter-generator":3},{"id":4,"title":5,"body":6,"description":134,"extension":135,"locale":136,"meta":137,"navigation":138,"path":139,"seo":140,"stem":141,"toolId":142,"__hash__":143},"tools\u002Ftools\u002Fen\u002Fcss-filter-generator.md","CSS Filter Generator",{"type":7,"value":8,"toc":126},"minimark",[9,14,49,55,59,62,66,81,85,123],[10,11,13],"h2",{"id":12},"filter-functions","Filter functions",[15,16,17,18,22,23,22,26,22,29,22,32,22,35,22,38,22,41,44,45,48],"p",{},"Adjust the nine visual filter functions — ",[19,20,21],"code",{},"blur",", ",[19,24,25],{},"brightness",[19,27,28],{},"contrast",[19,30,31],{},"saturate",[19,33,34],{},"grayscale",[19,36,37],{},"sepia",[19,39,40],{},"hue-rotate",[19,42,43],{},"invert",", and ",[19,46,47],{},"opacity"," — with a slider or a precise number. Each function has its own on\u002Foff switch, and changing a value turns it on automatically. Output always follows the CSS order, so the declaration only changes when you change it.",[15,50,51,54],{},[19,52,53],{},"drop-shadow"," gets its own panel with x\u002Fy offsets, blur, color, and opacity, and is appended after the simple functions.",[10,56,58],{"id":57},"live-preview","Live preview",[15,60,61],{},"The preview card updates as you tune the filters. Switch the background between light, dark, white, and slate, or upload a photo (it never leaves your browser) to judge the effect on a real image. Everything is computed locally.",[10,63,65],{"id":64},"filter-and-backdrop-filter","filter and backdrop-filter",[15,67,68,69,72,73,76,77,80],{},"Flip the switch to output ",[19,70,71],{},"backdrop-filter"," instead of ",[19,74,75],{},"filter",". In that mode the sample card becomes translucent so you can see the frosted-glass blur of whatever sits behind it — useful for the effect bars and overlays built on ",[19,78,79],{},"backdrop-blur",".",[10,82,84],{"id":83},"import-and-export","Import and export",[86,87,88,99,112],"ul",{},[89,90,91,95,96],"li",{},[92,93,94],"strong",{},"CSS",": ",[19,97,98],{},"filter: blur(4px) brightness(120%);",[89,100,101,95,104,107,108,111],{},[92,102,103],{},"Tailwind",[19,105,106],{},"[filter:blur(4px)_brightness(120%)]",", or ",[19,109,110],{},"filter-none"," when nothing is enabled.",[89,113,114,115,118,119,122],{},"Paste an existing ",[19,116,117],{},"filter:"," or ",[19,120,121],{},"backdrop-filter:"," value into the import box to keep editing it here.",[15,124,125],{},"Your settings and preview background are saved in this browser.",{"title":127,"searchDepth":128,"depth":128,"links":129},"",2,[130,131,132,133],{"id":12,"depth":128,"text":13},{"id":57,"depth":128,"text":58},{"id":64,"depth":128,"text":65},{"id":83,"depth":128,"text":84},"Tune blur, brightness, contrast, saturation, hue-rotate, sepia and drop-shadow with a live preview, then copy the CSS or Tailwind output.","md","en",{},true,"\u002Ftools\u002Fen\u002Fcss-filter-generator",{"title":5,"description":134},"tools\u002Fen\u002Fcss-filter-generator","css-filter-generator","0djLKiRRupGSb5Tn9fGDAEFUav0TbRabpgDTVjEDz6A",1792391416894]