Filters

go.raybo.org/5Wvy

There are a number of filters that you can add to your content. Let's take a look at these options.

Toggle Classes

  • filter
  • filter-none

To start using filters, you normally use two tags to toggle their effect. By themselves these classes don't do anything, so let's take a look at the different options available for filters.

Blur

  • blur(-AMT)
    • AMT

      none sm * md lg xl 2xl 3xl

Docs Try it

The blur filter gets an amount. You can use it without an amount and that would really be between the small and medium amount. I feel like the blur classes are a little agressive in terms of the strengths of the blurs though.

Drop Shadow

  • drop-shadow(-AMT)
    • AMT

      sm * md lg xl 2xl none

Docs Try it

You can add the dropshadow filter with different amounts. If you don't add an amount, it will do a drop shadow between sm and medium.

Brightness

  • brightness(-AMT)
    • AMT

      0 50 75 90 95 100 105 110 125 150 200

Docs Try it

The brightness filter lets you apply brightness to some content.

Contrast

  • contrast(-AMT)
    • AMT

      0 50 75 100 125 150 200

Docs Try it

Then there's a way to adjust the contrast of an image with an amount from 0 to 200 which really pushes the contrast of an image.

Saturate

  • saturate-(AMT)
    • AMT

      0 50 100 150 200

Docs Try it

Saturate modify how strong an image colors look. There's just a few amounts to worry about.

Hue Rotate

  • (-)hue-rotate-(AMT)
    • AMT

      0 15 30 60 90 180

Docs Try it

The hue-rotate filter lets you rotate the colors in an image 360 degrees. To use it you specify an amount that goes from -180 to 180. The rotation is about a 30 degree offset, but there are some numbers clearly missing here after 90 degrees. Notice that in the example, I switched over the the raybo.org spaceship since I think it's a bit clearly to see what the filter is doing with it.

Grayscale

  • grayscale
  • grayscale-0

Docs Try it

The grayscale filter is one of the simplest filters and simply takes a color image and converts it to grayscale. there's a reset option to toggle the image back to full color.

Invert

  • invert
  • invert-0

Docs Try it

The invert filter flips the colors in an image with their oposite color. There's just two options, one to invert and one to reset.

Sepia

sepia
sepia-0

Docs Try it

Sepia gives photo a duotone sort of style that looks pretty cool. It has a simple toggle style where you apply the filter with the sepia keyword and reset it with sepia-0