Skip to content
Toolspire

CSS Tools

CSS Filter Generator

CSS Filter Generator is part of Toolspire and is ready as soon as this page loads. Brightness 100 is 1, unchanged. Brightness 0 is black. The declaration is the filter property without a selector.

Runs in this tabFreeNo account

On this page

What you can do here

Percent to a unitless number

CSS brightness() wants 1.1, not 110% , though both are legal. The page writes the unitless form.

A semicolon included

You can paste the declaration into a rule.

Two functions, named

Adding more filters would hide which number did what. These two are the ones with boxes.

The sequence

How to use the CSS Filter Generator

  1. 1

    Set blur in pixels

    0 is no blur. 2 is the sample.

  2. 2

    Set brightness against 100

    110 is a little brighter. 100 must produce brightness(1).

  3. 3

    Paste into a rule

    The result includes the property name.

Worth knowing

  • CSS Filter Generator on Toolspire: the declaration is filter: blur(2px) brightness(1.1); for blur 2 and brightness 110.
  • Brightness percent is divided by 100. 110% is 1.1. 100% is 1.
  • Blur must be 0 or more. A negative blur is rejected.
  • This is two functions only. Contrast, hue and saturate are not in the string.

Two filter functions, one declaration

CSS filter takes a list of functions. This page writes blur and brightness, because those are the two numbers it asked for. Blur is a length in pixels. Brightness is a multiplier: 100% is 1, and 110% is 1.1. A brightness of 0 paints the element black. Other filter functions are left out so the declaration matches the boxes.

FAQ

Questions about CSS Filter Generator

Where does CSS Filter Generator run?

CSS Filter Generator runs in this tab on Toolspire. What you type or drop in is not sent to us and is not stored on a server.

What filter is blur 2 and brightness 110?

filter: blur(2px) brightness(1.1);

What is brightness 100?

brightness(1), which leaves the element unchanged.

Can blur be negative?

No. The page rejects it.

Where is contrast?

Not in this declaration. Only blur and brightness are written.

Keep going

Related tools

CSS Transform GeneratorNewCSS Transform Generator on Toolspire. Build a CSS transform from degrees, a scale and a translate in pixels. 15 degrees.CSS ToolsCSS Box Model CalculatorNewCSS Box Model Calculator on Toolspire. Add padding and border to a content box under the default content-box model. Content 100 by 50.CSS ToolsCSS Box Shadow GeneratorNewCSS box-shadow generator: build smooth layered shadows, edit each layer, start from Tailwind or Material presets, and copy CSS, Tailwind or React.CSS ToolsCSS Glassmorphism GeneratorNewCSS Glassmorphism Generator on Toolspire: Glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live.CSS ToolsCSS Neumorphism GeneratorNewCSS Neumorphism Generator on Toolspire: Neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states.CSS ToolsBento Grid GeneratorNewBento Grid Generator on Toolspire: Draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.CSS Tools

Open the full directory

Last updated Report a problem or suggest a feature