Custom UITextFields effects inspired by Codrops, built using Swift
Clone or download
raulriera Merge pull request #172 from vladislavsosiuk/improve-hoshitextfield
Update borders relatively to text field's state
Latest commit 94a4e98 Dec 8, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add support for 'stale' Apr 23, 2018
Screenshots Further improvements to Yoshiko Nov 8, 2015
TextFieldEffects Return curly brace back Dec 8, 2018
.gitignore Initial commit Jan 22, 2015
.swift-version Support for Xcode 10 b1 Jun 11, 2018
.travis.yml Build in Xcode 10 Oct 8, 2018 Release 1.5.1 Oct 14, 2018
LICENSE Initial commit Jan 22, 2015 Add Travis support Oct 8, 2018
TextFieldEffects.podspec Added swift version in the podspec Oct 18, 2018

TextFieldEffects Build Status

I fell in love with the text inputs effects in this article. As an exercise I decided to recreate as many of them as I can using Swift (some of them have a personal touch).

Currently it features the following effects from the article:

  • Kaede
  • Hoshi
  • Jiro
  • Isao
  • Minoru
  • Yoko
  • Madoka
  • Akira
  • Yoshiko

How they look











  • Looking for Swift 2.3 support? Check out the 1.2.0 tag.
  • Looking for Swift 2.1 support? Check out the 1.1.1 tag.
  • Looking for Swift 1.2 support? Check out the swift-1.2 branch.


The easiest way to install this framework is to drag and drop the TextFieldEffects/TextFieldEffects folder into your project. This also prevents the frameworks problem in iOS where the IBInspectable and IBDesignable are stripped out.


Add the following to your Podfile:

pod 'TextFieldEffects'


Add the following to your Cartfile:

github 'raulriera/TextFieldEffects'

How to use them

Every effect is properly documented in the source code, this is the best way to both understand and see what they do. There is also an example project included with all the effects and their settings.

Interface Builder

The library is a simple drop-in, as soon as you set your subclass to one of the effects and your module to TextFieldEffects you will be able to see all the IBDesignable settings in the storyboard.


If you like to get your hands dirty, you can use them just like you would normally use any UITextField

let textField = KaedeTextField(frame: textFieldFrame)
textField.placeholderColor = .darkGrayColor()
textField.foregroundColor = .lightGrayColor()


Is that simple.

Created by

Raul Riera, @raulriera