Click on the Add Filter button on the top left corner to start exploring available filters you can apply on the sample content.
Apply filters by clicking on them. You can tweak them for cool effects using the controls they display once activated. Controls to reorder filters, toggle them on or off, and to remove them are available next to their names.
Once you're happy with your tweaks, use the Save as Preset button, located above the sample content, to save them for later.
Check out the Timeline controls on the lower end of the screen. You can use them to create animations with filters.
- Make sure to apply at least one filter using the Add Filter menu.
- Click anywhere along the timeline to move the playhead to that position.
- Now, make some changes to the applied filter parameters.
This creates a new keyframe on the timeline.
- Click the play button from Timeline panel to view your animation. Use the input field next to the timeline to change the animation's duration.
- The controls next to the play button allow you to navigate through keyframes and toggle them on or off.
As you make changes to the filters you'll see the corresponding CSS output in the CSS Syntax panel. The same goes for animations and the CSS Animation Syntax panel.
This is valid CSS code you can reuse in your own projects.