Skip to content

Visual effects: HTML, React and WordPress components

Purely decorative CSS visual effects: animated backgrounds, gradient text, glowing borders, all still when reduced motion is requested.25 components (visual effects) that are accessible and responsive, ready for your site: HTML + Tailwind, React, plain CSS and a WordPress block.

All 25 resources

  • A large heading in hollow letters where each word fills with colour from left to right, one after another.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A product card crossed at the corner by a discount ribbon over which a glint of light sweeps.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • An integrations pitch where seven icons slowly circle a logo on two orbits.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • An offer card topped with a deck of colour swatches that fans out on hover or keyboard focus.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A show card with a “Live” badge whose white dot sends out a continuously spreading ripple.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A heading whose key words get highlighted one after the other, as if by a stroke of a highlighter pen.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • An announcement set on small bubbles that gently rise from the bottom of the section, swaying, then fade away.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A pink neon heading framed by a blue tube, whose glow flickers now and then like a real sign.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A seasonal announcement behind which autumn leaves fall, gently swaying.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • An offer card around which four frame corners slide into place on hover or keyboard focus.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A translucent, blurred card set over colourful shapes that slowly float behind it.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • The bottom of a coloured section cut by three translucent waves rolling at different speeds.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A heading that types itself letter by letter behind a blinking caret, in pure CSS.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • Steps that fade and slide into view as the page scrolls, with no script.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • An announcement set on sun rays that slowly turn from the centre, fading towards the edges.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A large heading whose letters hop one after another, like a wave running through it.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A highlighted word in a heading, around which small stars fade in and out as they twinkle.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A hero set on a pastel mesh gradient whose colour patches slowly glide.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A card that lifts on hover while an iridescent shine sweeps diagonally across it, like a holographic card.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A call-to-action button wrapped in a breathing glow that brightens and gets swept by a shine on hover.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A heading whose highlighted words are filled with a continuously sliding colour gradient.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A section on a dot grid fading towards the edges, swept by a wandering teal glow.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A hero section set on blurred colour glows that slowly drift, like the northern lights.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A card whose outline is travelled by an endless violet and cyan streak of light.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • Two rows of large words scrolling in opposite directions, faded at the edges, with a pause button.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component